历时10个多月学习了这132个CSS特效 还不来学习-实鼠不易-牛气冲天!
这132个特效,是我历时10个多月在油管一个一个跟着敲出来的,为了加强记忆,每个练习,我都录制了视频,在这里分享出来给大家。大家可能又会调侃了,你是工作不饱和吧,有时间做这些。其实,我目前工作还是挺饱和的,都是挤出来的。我们是9点上班,我基本7点半就到公司自学了,这样我就有一个半小时的时间来做这些了。
对于 CSS 评价,无论是在论坛还是身边的人,我听到最多的是学 CSS 这些花里胡哨没啥用,实际项目中又用不到。听到这些心里还是挺实受挫的,有时候会怀疑自己,我学习的方向是不是错了。但在几次的项目需要用到一些特效,我都能很快的找到思路并做出来,我想这是得益于,我平时所学的这些特效积累出来的。
现在我不在困惑我所学的东西,因为学习成长是你自己事情,而不是别人在意的眼光。
对应的所有视频可以到 【B站查看】,或者在 B 站搜索 前端小智 即可看到,源码都在视频简介里面,大家进行查看。
前 66 个请点击下面链接。
历时4个多月,学习了这 66 个CSS 特效
67.信号故障特效效果:
![图片](https://s4.51cto.com/oss/202101/22/bb74a6ea07f0b5d7d5c89db7e0587256.jpg)
视频地址:https://www.bilibili.com/video/BV17V411r74q/
68.自定义动态复选框效果:
![图片](https://s5.51cto.com/oss/202101/22/267eaae43c7c5c52b0601e7f510ec5d4.jpg)
视频地址:https://www.bilibili.com/video/BV16Z4y1u7NY/
69.创意div盒设计效果:
![图片](https://s3.51cto.com/oss/202101/22/b3a6ded45e808197bea5123eb08b6775.jpg)
视频地址:https://www.bilibili.com/video/BV1dK411J7p2/
70.SVG弹性线条动画特效效果:
![图片](https://s3.51cto.com/oss/202101/22/c6ff0702d8010e18a27610ba98e21be8.jpg)
视频地址:https://www.bilibili.com/video/BV1bA411Y7UY/
71.类似望花筒特效
![图片](https://s6.51cto.com/oss/202101/22/207a36dbb94a59f436fb684251612492.jpg)
演示视频:https://www.bilibili.com/video/BV1Mh411Z7Ze/
72.刮刮乐特效
![图片](https://s3.51cto.com/oss/202101/22/b8512613f676c023d04085d369c28c57.jpg)
演示视频:https://www.bilibili.com/video/BV16f4y1X7Yr/
73.使用HTML CSS和jQuery进行水平页面滚动
![图片](https://s4.51cto.com/oss/202101/22/772520f3509f9a918bbcfd37fdb0c6e2.jpg)
视频地址:https://www.bilibili.com/video/BV14A411Y7Gd/
74.CSS Clip-path 鼠标移动特效
![图片](https://s3.51cto.com/oss/202101/22/a0c83484c7bcbfa299d0f26f3fe6bc60.jpg)
视频地址:https://www.bilibili.com/video/BV1oD4y1U7C8/
75. 让面部表情跟着鼠标光标变化
![图片](https://s3.51cto.com/oss/202101/22/bdf8dcd34c358e528acd236b055add4f.jpg)
视频地址:https://www.bilibili.com/video/BV1vT4y157Up/
76.星星闪烁特效
![图片](https://s5.51cto.com/oss/202101/22/aecdf8d41f7beaf25092be60add03d19.jpg)
视频地址:https://www.bilibili.com/video/BV1tf4y1979Z/
77.CSS渐变按钮悬停效果
![图片](https://s6.51cto.com/oss/202101/22/41cbe9a7b3d119c416ba212ba72e668d.jpg)
视频地址:https://www.bilibili.com/video/BV1EV411U7fD/
78.聚光灯特效(JQuery鼠标移动特效)
![图片](https://s2.51cto.com/oss/202101/22/e45f1aab72c95aba9f9399ed20e89f84.jpg)
视频地址:https://www.bilibili.com/video/BV1sA411n7us/
79.3D视频立方体特效
![图片](https://s5.51cto.com/oss/202101/22/d5f2f33425dcacdf28c36fb10b0fe455.jpg)
视频地址:https://www.bilibili.com/video/BV1eZ4y1K7o3/
80.3D背景动画效果
![图片](https://s3.51cto.com/oss/202101/22/ec49f6b9cb957bb6f6cc7f4d4f860bf8.jpg)
视频地址:https://www.bilibili.com/video/BV1tK4y1Y771/
81.滑块百分比的有趣应用
![图片](https://s5.51cto.com/oss/202101/22/53406886262dd51fe20831930e0c231c.jpg)
视频地址:https://www.bilibili.com/video/BV1V5411h7iZ/
82.纯CSS液体加载特效
![图片](https://s5.51cto.com/oss/202101/22/e44375fcf1ec5dab436d10fc932887a5.jpg)
视频地址:https://www.bilibili.com/video/BV1Dh41197Lf/
83.CSS悬停效果(只是为了好玩)
![图片](https://s5.51cto.com/oss/202101/22/cfdbb1e75e05ba2a5e5d005f3ec68072.jpg)
视频地址:https://www.bilibili.com/video/BV145411b7RJ/
84.CSS 3D波浪加载特效
![图片](https://s3.51cto.com/oss/202101/22/1e304220ffdd5bc4ab88e10d489df8bc.jpg)
视频播放地址:https://www.bilibili.com/video/BV15D4y1m7JG/
85.CSS水波背景动画特效
![图片](https://s2.51cto.com/oss/202101/22/94e4ab21d3322e135232c1aa6b230508.jpg)
视频演示地址:https://www.bilibili.com/video/BV1Lf4y1X7Bm/
86.CSS加载文本动画特效
![图片](https://s6.51cto.com/oss/202101/22/447b762c453e701ef3a39b8ceefbe8d1.jpg)
视频地址:https://www.bilibili.com/video/BV1YA411n7xu/
87.服务条款的一种展示特效
![图片](https://s4.51cto.com/oss/202101/22/ea3f8025a13a284743d449038ecf415d.jpg)
视频地址:https://www.bilibili.com/video/BV1vA411E77W/
88.幽灵文字特效
![图片](https://s4.51cto.com/oss/202101/22/8ba5a05e646622ba1a5a291c4e296200.jpg)
视频地址:https://www.bilibili.com/video/BV17T4y1A7Vg/
89.破碎的玻璃横幅
![图片](https://s2.51cto.com/oss/202101/22/fadcc44c0ec1eaa97e57339aa882aedb.jpg)
视频地址:https://www.bilibili.com/video/BV1s5411b78Q/
90.CSS列表项悬停特效
![图片](https://s6.51cto.com/oss/202101/22/6a06ef1cc99e1c1627433f731f080d37.jpg)
视频地址:https://www.bilibili.com/video/BV1KZ4y1N7nr/
91.方向感应卡悬停效果
![图片](https://s2.51cto.com/oss/202101/22/b9f05df7b87e63e828c231488646d751.jpg)
视频地址:https://www.bilibili.com/video/BV1Jf4y1D7Lm/
92.发光文字加载特效
![图片](https://s4.51cto.com/oss/202101/22/67e2f0611d780c8ef060f51aa6fa116c.jpg)
视频地址:https://www.bilibili.com/video/BV17A411J7RL/
93.砖石旋转背景动画特效
![图片](https://s6.51cto.com/oss/202101/22/43c67b81fa1475c03628ef2a403673c0.jpg)
视频地址:https://www.bilibili.com/video/BV1yv411C7NJ/
94.文字悬停分割特效
![图片](https://s6.51cto.com/oss/202101/22/08bf84c11775919cd6880ecceb053629.jpg)
视频地址:https://www.bilibili.com/video/BV1RV411m7LQ/
95.按钮涟漪特效
![图片](https://s6.51cto.com/oss/202101/22/6060fa816772e1844fe61e648f5ba8ed.jpg)
视频地址:https://member.bilibili.com/v2#/upload-manager/article
96.魔幻的滚动视差特效
![图片](https://s3.51cto.com/oss/202101/22/a2ccee2c1133cb9e3c6ccd6e29fabe32.jpg)
视频地址:https://www.bilibili.com/video/BV1LK411A7X2/
97.炫酷加载特效(模拟手机信号)
![图片](https://s6.51cto.com/oss/202101/22/3f5a7faeb6b0a384c78d4a5d1489ec4d.jpg)
视频地址:https://www.ixigua.com/6882247186009031181/
98.炫酷发光特效
![图片](https://s4.51cto.com/oss/202101/22/7d88a83436f7d369a8ac82b6fe3d29c6.jpg)
视频地址:https://www.ixigua.com/6882247186009031181/
99.仙境特效
![图片](https://s4.51cto.com/oss/202101/22/688d10c79069c9dc9976efd1648f7ae8.jpg)
视频地址:https://www.ixigua.com/6883784380632793611/
100.模拟播放暂时特效
![图片](https://s6.51cto.com/oss/202101/22/f50d5ecb8fe1d8e2e3bfae2ad781be92.jpg)
视频地址:https://www.ixigua.com/6885309534483513859/
101.新拟物渐变加载特效
![图片](https://s2.51cto.com/oss/202101/22/48472de28a81eb2fb9be915ed047e754.jpg)
视频地址:https://www.ixigua.com/6886389124811457032/
102.使用Vanilla lift.js实现3D视差倾斜效果
![图片](https://s3.51cto.com/oss/202101/22/779c2560264d196c9496d1bedb8f13af.jpg)
视频地址:https://www.ixigua.com/6887878632572715532/
103.3D书籍模型
![图片](https://s3.51cto.com/oss/202101/22/07ba6fecbc931b6b14a77b75e4697233.jpg)
视频地址:https://www.ixigua.com/6888608009556230667/
104.打工人的撕裂方式
![图片](https://s3.51cto.com/oss/202101/22/53864a26942afcb155ccddf10b54629b.jpg)
视频地址:https://www.ixigua.com/6890835336868397572/
105.液体流加载特效
![图片](https://s3.51cto.com/oss/202101/22/23ec6880cfcf30ce30f7412f1c3817c0.jpg)
视频地址:https://www.ixigua.com/6891580915374359043/
106.创意视频球特效
![图片](https://s3.51cto.com/oss/202101/22/ef48bfb5823ce373fa5ffaef2bbd4409.jpg)
视频地址:https://www.ixigua.com/6893066211257483784/
107.CSS响应卡片悬停特效
![图片](https://s2.51cto.com/oss/202101/22/a2ffa9602af0e0651a2ee01e8b9b834c.jpg)
视频地址:https://www.ixigua.com/6893808422605554183/
108.使用Grade.Js自动生成渐变背景颜色
![图片](https://s3.51cto.com/oss/202101/22/f3d8dddab5db73951ad7778231b4d6e8.jpg)
视频地址:https://www.ixigua.com/6894533882432094728/
109.现代CSS按钮悬停效果
![图片](https://s2.51cto.com/oss/202101/22/21ff41c79e49de981cd50eee2917657e.jpg)
视频地址:https://www.ixigua.com/6897449872975200780/
110.无限叠卡特效
![图片](https://s2.51cto.com/oss/202101/22/352c96a1edbc4179135ef269091fb5eb.jpg)
视频地址:https://www.ixigua.com/6897450763094753800/
111.使用CSS进行彩色烟雾视频和文本处理
![图片](https://s6.51cto.com/oss/202101/22/1862629c22593752b0e068eb21c6a238.jpg)
视频地址:https://www.ixigua.com/6898262151455048199/
112.使用 sketch.js 实现彗星特效
![图片](https://s3.51cto.com/oss/202101/22/6137a650f1fd4dd28a6d398b9485a61a.jpg)
视频地址:https://www.ixigua.com/6899588911862022660/
113.文字肖像特效
![图片](https://s3.51cto.com/oss/202101/22/1aaa71ba2b7f7ece012f71c9a0388b21.jpg)
视频地址:https://www.ixigua.com/6901230535520027143/
114.使用SVG filter创建粘糊糊效果
![图片](https://s3.51cto.com/oss/202101/22/61fabc81a0d9de81d89a170cfd7b5cd6.jpg)
视频地址:https://www.ixigua.com/6902344348986262024/
115.滑动菜单指示器特效
![图片](https://s4.51cto.com/oss/202101/22/e43eb90d10d788853a738a8e790373e7.jpg)
视频地址:https://www.ixigua.com/6903449899006689804/
117.纯CSS 和 JS 实现泡泡特效
![图片](https://s5.51cto.com/oss/202101/22/f467f4a602bc56b00fab96333e1b3c42.jpg)
视频地址:https://www.ixigua.com/6904504548409213454/
118.CSS3按钮悬停闪亮特效
![图片](https://s6.51cto.com/oss/202101/22/c1916b85d4882a21bf5e52571a1bc919.jpg)
视频地址:https://www.ixigua.com/6906066035506414084/
119.css按钮边框渐变发光特效
![图片](https://s3.51cto.com/oss/202101/22/577dc3a95c31e575bddcf4fdbb2c0152.jpg)
视频地址:https://www.ixigua.com/6906796258489270788/
120.如何使用 JS 动态更新CSS变量
![图片](https://s6.51cto.com/oss/202101/22/e0b4dca8c051cd93e896f4d8f8712ccc.jpg)
视频地址:https://www.ixigua.com/6907873173098889731/?&wid_try=1
121.使用gsap scrollTrigger滚动触发CSS动画
![图片](https://s3.51cto.com/oss/202101/22/9db22085e4136ad0b9106ef6f22e7fdd.jpg)
视频地址: https://www.bilibili.com/video/BV1964y1f7CK/
122.为你的博客和网站设计一个简单的日历
![图片](https://s4.51cto.com/oss/202101/22/0165abf4125edd3115615b3540dcebc7.jpg)
123.火箭发射特效
![图片](https://s3.51cto.com/oss/202101/22/c74091cd9bf26f71a24d1dcff9dcfd67.jpg)
视频地址:https://www.ixigua.com/6910132650648797699/
124.酷炫box-shadow 悬停特效
![图片](https://s2.51cto.com/oss/202101/22/7b00d82209e7824f6e72f4054e86a1b3.jpg)
视频地址:https://www.ixigua.com/6911265897659400708/
125.如何使用 JS 实现背景视差特效
![图片](https://s4.51cto.com/oss/202101/22/0a484afe7f4e83ef453d942a57dbc006.jpg)
视频地址:https://www.ixigua.com/6911983867603878407/
126.如何使用CSS和 JS 创建简单图片切换
![图片](https://s6.51cto.com/oss/202101/22/7236d09b2c58515285056653bbd8c605.jpg)
视频地址:https://www.ixigua.com/6914222592170263053/
127.CSS 图标魔法线悬停特效
![图片](https://s5.51cto.com/oss/202101/22/10c582fa5f50deb73b8e9fbf4187dc72.jpg)
视频地址:https://www.ixigua.com/6914589524660224526/
128.落叶飘舞动画特效
![图片](https://s2.51cto.com/oss/202101/22/1bc2c7da575b74acb04cd2354d1050af.jpg)
视频地址:https://www.ixigua.com/6915324225184072200/
129.好家伙,女朋友让我用前端人的方式,描述一下一幅画被墨水洒的到样子
![图片](https://s2.51cto.com/oss/202101/22/63c0fdff45d3f29f7c94317fafbe66a3.jpg)
视频地址:https://www.ixigua.com/6916439319217603085/
130. HTML+CSS完成苹果logo加载效果,好家伙,还不收藏一波!
![图片](https://s6.51cto.com/oss/202101/22/1e87690c79214b98810c0bc048a05c93.jpg)
视频地址:https://www.ixigua.com/6917189337700368907/
131.手撸一个跑马灯加载特效送给前端女朋友
![图片](https://s2.51cto.com/oss/202101/22/2273ff841705c3ed9b219b840c8126ef.jpg)
视频地址:https://www.ixigua.com/6917930699139842563
132.前端人,来,给沾满雾气的玻璃刮一刮,好家伙,这工具超好用!
![图片](https://s5.51cto.com/oss/202101/22/77faed2cee82541cc43d8bc70b62f310.jpg)
视频地址:https://www.ixigua.com/6919046116382081540
相关文章
- 发现 Linux SpaceFM 文件管理器的威力
- 夯实数据智能底座 共筑数字经济发展“新基石”
- 五分钟教你使用console.log发布公司的招聘信息
- 微软发布 Windows 11 Beta 预览版 Build 22621.1250 和 22623.1250 (KB5023008)
- Windows 11 学院:在 Windows 11 Build 25290 上如何为文件管理器启用标签页拖拽支持
- 微软Windows 11 Dev 预览版 Build 25290 发布:带来新的开始菜单提醒角标
- 微软正用全屏通知提醒 Windows 10 用户免费升级 Windows 11,要点击 5 次才能退出
- Linux Mint 21.2 将于 6 月发布:改进登录屏幕,优化 Pix 图像管理程序等等
- 字节面试也会问SPI机制?
- 微软正式停售 Windows 10 产品密钥 / 许可证:继续提供 ISO 镜像下载,推荐用户升级 Windows 11
- 用复古电脑程序 Toy CPU 学习低级编程
- Windows 11 新功能泄露:现代音量合成器、实验工具和新的文件管理器
- 微软 Windows 11 文件资源管理器全新设计曝光:UI 迎来大修,整合 Microsoft 365
- 对比Pandas,学习PySpark大数据处理
- 微软宣布为Windows 11 21H2设备开启自动更新到22H2版本
- 互联网都在说降本增效,小红书技术团队是怎么做的?
- 微软将继续提供 Windows 10 ISO 镜像下载,即将停售产品密钥 / 许可证
- 微软宣布为Windows 11 21H2 设备开启自动更新到 22H2 版本
- 面试突击:Properties和Yml有什么区别?
- 微软 Windows 11 Beta 预览版 22621.1245 和 22623.1245 (KB5022358) 发布