共计 6519 个字符，预计需要花费 17 分钟才能阅读完成。
点赞再看 ，微信搜寻【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文
GitHubhttps://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。
这 66 个特效，是我历时 4 个多月在油管一个一个跟着敲进去的，为了增强记忆，每个练习，我都录制了视频，在这里分享进去给大家。大家可能又会调侃了，你是工作不饱和吧，有工夫做这些。其实，我目前工作还是挺饱和的，都是挤出来的。咱们是 9 点下班，我根本 7 点半就到公司自学了，这样我就有一个半小时的工夫来做这些了。
对于 CSS 评估，无论是在论坛还是身边的人，我听到最多的是学 CSS 这些花里胡哨没啥用，理论我的项目中又用不到。听到这些心里还是挺实受挫的，有时候会狐疑本人，我学习的方向是不是错了。但在几次的我的项目须要用到一些特效，我都能很快的找到思路并做进去，我想这是得益于，我平时所学的这些特效积攒进去的。
当初我不在困惑我所学的货色，因为学习成长是你本人事件，而不是他人在意的眼光。
这个系列我会始终学习上来，第一季 66 节课，曾经更结束，所有的源码都在上面的地址：
https://blog.csdn.net/qq44924…
这个须要 2 瓶高兴水的钱，毕竟整顿这些还是挺幸苦的，有趣味的能够本人看看。
01. 波浪文本动画
成果
视频地址 1：https://www.ixigua.com/i68077…
视频地址 2：https://www.bilibili.com/vide…
02. 涟漪动画
成果
视频地址一：https://www.ixigua.com/i68079…
视频地址一：https://www.bilibili.com/vide…
03. 视频字幕悬停特效
成果
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68091…
04- 新拟物单选按钮成果
成果
视频地址一：https://www.ixigua.com/i68095…
视频地址二：https://www.bilibili.com/vide…
05- 全屏视频背景滚动淡出
成果
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68099…
06- 创意产品卡
成果
视频地址一：https://mp.toutiao.com/profil…
视频地址二：https://www.bilibili.com/vide…
07. 创意菜单项悬停特效
成果
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68121…
08. 怎么配合视频做好 CSS 特效
成果
视频地址一：https://www.ixigua.com/i68128…
视频地址二：https://www.bilibili.com/vide…
09. 制作有共性的滚动条
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68131…
10.BoxShadow 高级到高级特效
成果
视频地址一：https://www.bilibili.com/vide…
视频地址一：https://www.ixigua.com/i68142…
11. 仅应用 CSS 对任何 SVG 图标进行动画解决
成果
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68140…
12. 应用 CSS3 实现响应式举荐卡片
成果
视频地址一：https://www.bilibili.com/vide…
视频地址一：https://www.ixigua.com/i68147…
13. 新拟物炫酷时钟
成果
视频地址一：https://www.bilibili.com/vide…
视频地址一：https://www.ixigua.com/i68151…
14. 应用 CSS Grid 实现瀑布流布局
成果
视频地址一：https://www.ixigua.com/i68155…
15.2.5D 视差效应
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68158…
16. 纯 CSS3 水波动画特效
成果
视频地址：https://www.ixigua.com/i68162…
17. 圆形进度条
成果
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68166…
18.3D 透视图与分层图像悬停成果
成果
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68177…
19. 显示暗藏明码框
成果
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68180…
20. 平面卡片展现特效
成果
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68184…
21. 按钮悬停特效
成果
视频地址：https://www.ixigua.com/i68188…
22. 文字肖像和鼠标挪动视差成果
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68192…
23. 输入框验证特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68203…
24. 粘性导航特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68210…
25. 乏味的子弹声特效
成果：
视频演示地址一：https://www.bilibili.com/vide…
视频演示地址二：https://www.ixigua.com/i68214…
26. 突变发光卡片
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68229…
27. 实现长暗影网页特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68236…
28. 发光复选框特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68240…
29. 酷炫 Loading 特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68255…
30. 鼠标挪动多彩心网页特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68258…
31. 实现定价卡悬停特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68266…
32. 3D 翻转卡片特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68270…
33. 视频滑块特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68281…
34. 像素化图像悬停特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68284…
35. 按钮悬停效霓虹灯特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68288…
36. 笑脸评分栏特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址一：https://www.ixigua.com/i68295…
37. 鼠标挪动线条特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68307…
38. 鼠标挪动炫酷特效
成果
视频演示地址一：https://www.bilibili.com/vide…
视频演示地址二：https://www.ixigua.com/i68318…
39. 粘滞滚动特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68322…
40. 新拟物 checkbox 特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68333…
41.clip-path 滚动特效
成果
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68336…
42. 波浪 div 动画成果
成果
视频地址：https://www.ixigua.com/i68340…
43. 滚动歪斜的背景特效
成果
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68344…
44. 计数器设计思路
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68359…
45. 菜单悬停滑动特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68362…
46. 很棒的图标悬停特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68366…
47. 霓虹灯按钮动画成果的悬停
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.bilibili.com/vide…
48. 窗帘响应菜单特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68384…
49. 新拟物按钮悬停成果
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68388…
50. 新拟物卡片悬停特效
成果：
视频地址一：https://www.bilibili.com/vide…
视频地址二：https://www.ixigua.com/i68392…
51.3D 图像翻转特效
成果：
视频地址一：https://www.ixigua.com/i68400…
视频地址二：https://www.bilibili.com/vide…
52. 响应式剪贴蒙版视差滚动成果
成果：
视频地址一：https://www.ixigua.com/i68411…
视频地址二：https://www.bilibili.com/vide…
53. 网站夜间日间特效
成果：
视频地址一：https://www.ixigua.com/i68411…
视频地址二：https://www.bilibili.com/vide…
54. 文本旋转动画成果
成果：
视频地址一：https://www.ixigua.com/i68418…
视频地址二：https://www.bilibili.com/vide…
55. 创意按钮悬停特效
成果：
视频地址一：https://mp.toutiao.com/profil…
视频地址二：https://www.bilibili.com/vide…
56.3D 编辑文本特效
成果：
视频地址一：https://www.ixigua.com/i68437…
视频地址二：https://www.bilibili.com/vide…
57. 响应盒模型特效
成果：
58. 数字时钟特效
成果：
视频地址一：https://www.ixigua.com/i68444…
视频地址二：https://www.bilibili.com/vide…
59. 弹出框与含糊的背景特效
成果
视频地址一：https://www.ixigua.com/i68451…
视频地址二：https://www.bilibili.com/vide…
60. 如何在文字内搁置视频
成果
视频地址一：https://www.ixigua.com/684631…
视频地址二：https://www.bilibili.com/vide…
61. 反射属性 -webkit-box-reflect 利用
成果
视频地址一：https://www.ixigua.com/684705…
视频地址二：https://www.bilibili.com/vide…
62. 突变发光加载动画特效
成果
63. 全屏加载页面动画特效
成果
视频地址一：https://www.ixigua.com/684890…
视频地址二：https://www.bilibili.com/vide…
64. 圣诞节动画特效
成果
视频地址一：https://www.ixigua.com/684927…
视频地址二：https://www.bilibili.com/vide…
65. 粘糊糊的动画成果
成果
视频地址一：https://www.ixigua.com/685001…
视频地址二：https://www.bilibili.com/vide…
66. 电视乐音动画特效
成果
视频地址一：https://www.ixigua.com/685038…
视频地址二：https://www.bilibili.com/vide…
人才们的【三连】就是小智一直分享的最大能源，如果本篇博客有任何谬误和倡议，欢送人才们留言，最初，谢谢大家的观看。
所有特效源码：https://blog.csdn.net/qq44924…
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
交换
文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。