We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。
GitHub
这 66 个特效,是我历时4个多月在油管一个一个跟着敲出来的,为了加强记忆,每个练习,我都录制了视频,在这里分享出来给大家。大家可能又会调侃了,你是工作不饱和吧,有时间做这些。其实,我目前工作还是挺饱和的,都是挤出来的。我们是9点上班,我基本7点半就到公司自学了,这样我就有一个半小时的时间来做这些了。
对于 CSS 评价,无论是在论坛还是身边的人,我听到最多的是学 CSS 这些花里胡哨没啥用,实际项目中又用不到。听到这些心里还是挺实受挫的,有时候会怀疑自己,我学习的方向是不是错了。但在几次的项目需要用到一些特效,我都能很快的找到思路并做出来,我想这是得益于,我平时所学的这些特效积累出来的。
现在我不在困惑我所学的东西,因为学习成长是你自己事情,而不是别人在意的眼光。
这个系列我会一直学习下去,第一季 66 节课,已经更完毕,所有的源码都在下面的地址:
66
https://blog.csdn.net/qq449245884/category_9873715.html
这个需要2瓶快乐水的钱,毕竟整理这些还是挺幸苦的, 有兴趣的可以自己看看。
效果
视频地址1:https://www.ixigua.com/i6807702906041532939/
视频地址2:https://www.bilibili.com/video/BV1Y7411m7b6
视频地址一:https://www.ixigua.com/i6807982622866670083/
视频地址一:https://www.bilibili.com/video/BV1V741117Gm/
视频地址一:https://www.bilibili.com/video/BV1f7411Q7JD/
视频地址二:https://www.ixigua.com/i6809102422514860548/
视频地址一:https://www.ixigua.com/i6809529914975322632/
视频地址二:https://www.bilibili.com/video/BV1Q7411D7LH/
视频地址一:https://www.bilibili.com/video/BV1nC4y1s7Dw/
视频地址二:https://www.ixigua.com/i6809937347405152781/
视频地址一:https://mp.toutiao.com/profile_v3/xigua/content-manage
视频地址二:https://www.bilibili.com/video/BV1mt4y1m7Nw/
视频地址一:https://www.bilibili.com/video/BV1za4y1t73c/
视频地址二:https://www.ixigua.com/i6812147372131353091/
视频地址一:https://www.ixigua.com/i6812840842902897164/
视频地址二:https://www.bilibili.com/video/BV1Le41147w9/
视频地址一:https://www.bilibili.com/video/BV17e41147Gr/
视频地址二:https://www.ixigua.com/i6813181916829712908/
视频地址一:https://www.bilibili.com/video/BV1YC4y1s7kG/
视频地址一:https://www.ixigua.com/i6814296955070448135/
视频地址一:https://www.bilibili.com/video/BV1AA411b7tA/
视频地址二:https://www.ixigua.com/i6814028560034955780/
视频地址一:https://www.ixigua.com/i6814703631879635467/
视频地址一:https://www.bilibili.com/video/BV1pQ4y1K76g/
视频地址一:https://www.ixigua.com/i6815132991329665539/
视频地址一:https://www.ixigua.com/i6815506102424175116/
视频地址一:https://www.bilibili.com/video/BV1mT4y1G7cY/
视频地址二:https://www.ixigua.com/i6815871539683000835/
视频地址:https://www.ixigua.com/i6816244424448672260/
视频地址一:https://www.bilibili.com/video/BV1qp4y1X7Jz/
视频地址二:https://www.ixigua.com/i6816614062399422980/
视频地址一:https://www.bilibili.com/video/BV1J64y1T7XV/
视频地址二:https://www.ixigua.com/i6817737160876098056/
视频地址一:https://www.bilibili.com/video/BV1UQ4y1K7oz/
视频地址二:https://www.ixigua.com/i6818096482898412036/
视频地址一:https://www.bilibili.com/video/BV1ce411s7AG/
视频地址二:https://www.ixigua.com/i6818471295219401219/
视频地址:https://www.ixigua.com/i6818851166034592267/
效果:
视频地址一:https://www.bilibili.com/video/BV1TV411d7F6/
视频地址二:https://www.ixigua.com/i6819215565555499532/
视频地址一:https://www.bilibili.com/video/BV1Ak4y1k7Dm/
视频地址二:https://www.ixigua.com/i6820325547432739339/
视频地址一:https://www.bilibili.com/video/BV15K411577L/
视频地址二:https://www.ixigua.com/i6821071022444249611/
视频演示地址一:https://www.bilibili.com/video/BV1C54y1Q7hd/
视频演示地址二:https://www.ixigua.com/i6821449649967071748/
视频地址一:https://www.bilibili.com/video/BV1Qf4y1m7BY/
视频地址二:https://www.ixigua.com/i6822923946040492556/
视频地址一:https://www.bilibili.com/video/BV1uA411t78K/
视频地址二:https://www.ixigua.com/i6823670426938376716/
视频地址一:https://www.bilibili.com/video/BV1qz411z7Eq/
视频地址二:https://www.ixigua.com/i6824042494213227012/
视频地址一:https://www.bilibili.com/video/BV1dK411W7De/
视频地址二:https://www.ixigua.com/i6825524219757986318/
视频地址一:https://www.bilibili.com/video/BV1de411p7gc/
视频地址二:https://www.ixigua.com/i6825893346527937038/
视频地址一:https://www.bilibili.com/video/BV1mK411W7pG/
视频地址二:https://www.ixigua.com/i6826645569625129484/
视频地址一:https://www.bilibili.com/video/BV13K4y1t7zh
视频地址二:https://www.ixigua.com/i6827005668893917708/
视频地址一:https://www.bilibili.com/video/BV1Bk4y1k7QY
视频地址二:https://www.ixigua.com/i6828124892492202500/
视频地址一:https://www.bilibili.com/video/BV1ta4y1e7WP
视频地址二:https://www.ixigua.com/i6828497506532327939/
视频地址一:https://www.bilibili.com/video/BV11z4y1R74N
视频地址二:https://www.ixigua.com/i6828857444907614723/
视频地址一:https://www.bilibili.com/video/BV1Pt4y1y7K2/
视频地址一:https://www.ixigua.com/i6829582434183414283/
视频地址一:https://www.bilibili.com/video/BV1ag4y1i7E9/
视频地址二:https://www.ixigua.com/i6830722031856648707/
视频演示地址一:https://www.bilibili.com/video/BV1Xz411v7X9/
视频演示地址二:https://www.ixigua.com/i6831832169350955531/
视频地址一:https://www.bilibili.com/video/BV1r54y1D7Tk/
视频地址二:https://www.ixigua.com/i6832204729552994819/
视频地址一:https://www.bilibili.com/video/BV1iV411r7SD/
视频地址二:https://www.ixigua.com/i6833316731788722701/
视频地址一:https://www.bilibili.com/video/BV1tQ4y1P7DW/
视频地址二:https://www.ixigua.com/i6833685696041976323/
视频地址:https://www.ixigua.com/i6834042168265409027/
视频地址一:https://www.bilibili.com/video/BV17p4y1D7UA/
视频地址二:https://www.ixigua.com/i6834441977069568525/
视频地址一:https://www.bilibili.com/video/BV1vQ4y1P7SW/
视频地址二:https://www.ixigua.com/i6835920426430890499/
视频地址一:https://www.bilibili.com/video/BV1Sp4y1S7y7/
视频地址二 :https://www.ixigua.com/i6836281379467035147/
视频地址一:https://www.bilibili.com/video/BV1ef4y127k5/
视频地址二: https://www.ixigua.com/i6836657427052495373/
视频地址一:https://www.bilibili.com/video/BV15k4y1z7gW/
视频地址二:https://www.bilibili.com/video/BV15k4y1z7gW/
视频地址一:https://www.bilibili.com/video/BV1TT4y1J7qf/
视频地址二:https://www.ixigua.com/i6838419811442098700/
视频地址一:https://www.bilibili.com/video/BV1fv411q7AT/
视频地址二:https://www.ixigua.com/i6838884535929668107/
视频地址一:https://www.bilibili.com/video/BV1Df4y1y7am/
视频地址二:https://www.ixigua.com/i6839252135687750156/
视频地址一:https://www.ixigua.com/i6840006472894513676/
视频地址二:https://www.bilibili.com/video/BV15A411i7dU/
视频地址一:https://www.ixigua.com/i6841112747518722568/
视频地址二:https://www.bilibili.com/video/BV1hv411677o/
视频地址二:https://www.bilibili.com/video/BV1pa4y1Y7n9/
视频地址一:https://www.ixigua.com/i6841854545706877447/
视频地址二:https://www.bilibili.com/video/BV1iC4y1a7wW/
视频地址二:https://www.bilibili.com/video/BV1ZK411n7v7/
视频地址一:https://www.ixigua.com/i6843709475413557764/
视频地址二:https://www.bilibili.com/video/BV1oi4y1G7xz/
视频地址一:https://www.ixigua.com/i6844451067896267278/
视频地址二:https://www.bilibili.com/video/BV1bp4y1U7fS/
视频地址一:https://www.ixigua.com/i6845126624082395656/
视频地址二:https://www.bilibili.com/video/BV1bA411i75h/
视频地址一:https://www.ixigua.com/6846310483146998275/
视频地址二:https://www.bilibili.com/video/BV1B5411Y7A5/
视频地址一:https://www.ixigua.com/6847050168638898692/
视频地址二:https://www.bilibili.com/video/BV1iA411e7Dr/
视频地址一:https://www.ixigua.com/6848908900436017676/
视频地址二:https://www.bilibili.com/video/BV1zK4y1s7it/
视频地址一:https://www.ixigua.com/6849270738138956299/
视频地址二:https://www.bilibili.com/video/BV1g5411e7yQ/
视频地址一:https://www.ixigua.com/6850016080396714499/
视频地址二:https://www.bilibili.com/video/BV1wK4y1x7BY/
视频地址一:https://www.ixigua.com/6850386816432865806/
视频地址二:https://www.bilibili.com/video/BV1Jv411q7oh/
人才们的 【三连】 就是小智不断分享的最大动力,如果本篇博客有任何错误和建议,欢迎人才们留言,最后,谢谢大家的观看。
所有特效源码:https://blog.csdn.net/qq449245884/category_9873715.html
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
文章每周持续更新,可以微信搜索 【大迁世界 】 第一时间阅读,回复 【福利】 有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,欢迎Star。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
这 66 个特效,是我历时4个多月在油管一个一个跟着敲出来的,为了加强记忆,每个练习,我都录制了视频,在这里分享出来给大家。大家可能又会调侃了,你是工作不饱和吧,有时间做这些。其实,我目前工作还是挺饱和的,都是挤出来的。我们是9点上班,我基本7点半就到公司自学了,这样我就有一个半小时的时间来做这些了。
对于 CSS 评价,无论是在论坛还是身边的人,我听到最多的是学 CSS 这些花里胡哨没啥用,实际项目中又用不到。听到这些心里还是挺实受挫的,有时候会怀疑自己,我学习的方向是不是错了。但在几次的项目需要用到一些特效,我都能很快的找到思路并做出来,我想这是得益于,我平时所学的这些特效积累出来的。
现在我不在困惑我所学的东西,因为学习成长是你自己事情,而不是别人在意的眼光。
这个系列我会一直学习下去,第一季
66
节课,已经更完毕,所有的源码都在下面的地址:这个需要2瓶快乐水的钱,毕竟整理这些还是挺幸苦的, 有兴趣的可以自己看看。
01.波浪文本动画
效果
图片描述视频地址1:https://www.ixigua.com/i6807702906041532939/
视频地址2:https://www.bilibili.com/video/BV1Y7411m7b6
02.涟漪动画
效果
图片描述视频地址一:https://www.ixigua.com/i6807982622866670083/
视频地址一:https://www.bilibili.com/video/BV1V741117Gm/
03.视频字幕悬停特效
效果
图片描述视频地址一:https://www.bilibili.com/video/BV1f7411Q7JD/
视频地址二:https://www.ixigua.com/i6809102422514860548/
04-新拟物单选按钮效果
效果
图片描述视频地址一:https://www.ixigua.com/i6809529914975322632/
视频地址二:https://www.bilibili.com/video/BV1Q7411D7LH/
05-全屏视频背景滚动淡出
效果
图片描述视频地址一:https://www.bilibili.com/video/BV1nC4y1s7Dw/
视频地址二:https://www.ixigua.com/i6809937347405152781/
06-创意产品卡
效果
图片描述视频地址一:https://mp.toutiao.com/profile_v3/xigua/content-manage
视频地址二:https://www.bilibili.com/video/BV1mt4y1m7Nw/
07.创意菜单项悬停特效
效果
图片描述视频地址一:https://www.bilibili.com/video/BV1za4y1t73c/
视频地址二:https://www.ixigua.com/i6812147372131353091/
08.怎么配合视频做好 CSS 特效
效果
图片描述视频地址一:https://www.ixigua.com/i6812840842902897164/
视频地址二:https://www.bilibili.com/video/BV1Le41147w9/
09.制作有个性的滚动条
图片描述视频地址一:https://www.bilibili.com/video/BV17e41147Gr/
视频地址二:https://www.ixigua.com/i6813181916829712908/
10.BoxShadow 初级到高级特效
效果
图片描述视频地址一:https://www.bilibili.com/video/BV1YC4y1s7kG/
视频地址一:https://www.ixigua.com/i6814296955070448135/
11.仅使用CSS对任何SVG图标进行动画处理
效果
图片描述视频地址一:https://www.bilibili.com/video/BV1AA411b7tA/
视频地址二:https://www.ixigua.com/i6814028560034955780/
12.使用 CSS3 实现响应式推荐卡片
效果
图片描述视频地址一:https://www.bilibili.com/video/BV1YC4y1s7kG/
视频地址一:https://www.ixigua.com/i6814703631879635467/
13.新拟物炫酷时钟
效果
图片描述视频地址一:https://www.bilibili.com/video/BV1pQ4y1K76g/
视频地址一:https://www.ixigua.com/i6815132991329665539/
14.使用 CSS Grid 实现瀑布流布局
效果
图片描述视频地址一:https://www.ixigua.com/i6815506102424175116/
15.2.5D视差效应
clipboard.png视频地址一:https://www.bilibili.com/video/BV1mT4y1G7cY/
视频地址二:https://www.ixigua.com/i6815871539683000835/
16.纯CSS3水波动画特效
效果
图片描述视频地址:https://www.ixigua.com/i6816244424448672260/
17.圆形进度条
效果
图片描述视频地址一:https://www.bilibili.com/video/BV1qp4y1X7Jz/
视频地址二:https://www.ixigua.com/i6816614062399422980/
18.3D透视图与分层图像悬停效果
效果
视频地址一:https://www.bilibili.com/video/BV1J64y1T7XV/
视频地址二:https://www.ixigua.com/i6817737160876098056/
19.显示隐藏密码框
效果
视频地址一:https://www.bilibili.com/video/BV1UQ4y1K7oz/
视频地址二:https://www.ixigua.com/i6818096482898412036/
20.立体卡片展示特效
效果
视频地址一:https://www.bilibili.com/video/BV1ce411s7AG/
视频地址二:https://www.ixigua.com/i6818471295219401219/
21.按钮悬停特效
效果
视频地址:https://www.ixigua.com/i6818851166034592267/
22.文字肖像和鼠标移动视差效果
效果:
视频地址一:https://www.bilibili.com/video/BV1TV411d7F6/
视频地址二:https://www.ixigua.com/i6819215565555499532/
23.输入框验证特效
效果:
视频地址一:https://www.bilibili.com/video/BV1Ak4y1k7Dm/
视频地址二:https://www.ixigua.com/i6820325547432739339/
24.粘性导航特效
效果:
视频地址一:https://www.bilibili.com/video/BV15K411577L/
视频地址二:https://www.ixigua.com/i6821071022444249611/
25.有趣的子弹声特效
效果:
视频演示地址一:https://www.bilibili.com/video/BV1C54y1Q7hd/
视频演示地址二:https://www.ixigua.com/i6821449649967071748/
26.渐变发光卡片
效果:
视频地址一:https://www.bilibili.com/video/BV1Qf4y1m7BY/
视频地址二:https://www.ixigua.com/i6822923946040492556/
27.实现长阴影网页特效
效果:
视频地址一:https://www.bilibili.com/video/BV1uA411t78K/
视频地址二:https://www.ixigua.com/i6823670426938376716/
28.发光复选框特效
效果:
视频地址一:https://www.bilibili.com/video/BV1qz411z7Eq/
视频地址二:https://www.ixigua.com/i6824042494213227012/
29. 酷炫 Loading 特效
效果:
视频地址一:https://www.bilibili.com/video/BV1dK411W7De/
视频地址二:https://www.ixigua.com/i6825524219757986318/
30.鼠标移动多彩心网页特效
效果:
视频地址一:https://www.bilibili.com/video/BV1de411p7gc/
视频地址二:https://www.ixigua.com/i6825893346527937038/
31.实现定价卡悬停特效
效果:
视频地址一:https://www.bilibili.com/video/BV1mK411W7pG/
视频地址二:https://www.ixigua.com/i6826645569625129484/
32. 3D 翻转卡片特效
效果:
视频地址一:https://www.bilibili.com/video/BV13K4y1t7zh
视频地址二:https://www.ixigua.com/i6827005668893917708/
33.视频滑块特效
效果:
视频地址一:https://www.bilibili.com/video/BV1Bk4y1k7QY
视频地址二:https://www.ixigua.com/i6828124892492202500/
34.像素化图像悬停特效
效果:
视频地址一:https://www.bilibili.com/video/BV1ta4y1e7WP
视频地址二:https://www.ixigua.com/i6828497506532327939/
35.按钮悬停效霓虹灯特效
效果:
视频地址一:https://www.bilibili.com/video/BV11z4y1R74N
视频地址二:https://www.ixigua.com/i6828857444907614723/
36.笑脸评分栏特效
效果:
视频地址一:https://www.bilibili.com/video/BV1Pt4y1y7K2/
视频地址一:https://www.ixigua.com/i6829582434183414283/
37.鼠标移动线条特效
效果:
视频地址一:https://www.bilibili.com/video/BV1ag4y1i7E9/
视频地址二:https://www.ixigua.com/i6830722031856648707/
38.鼠标移动炫酷特效
效果
视频演示地址一:https://www.bilibili.com/video/BV1Xz411v7X9/
视频演示地址二:https://www.ixigua.com/i6831832169350955531/
39.粘滞滚动特效
效果:
视频地址一:https://www.bilibili.com/video/BV1r54y1D7Tk/
视频地址二:https://www.ixigua.com/i6832204729552994819/
40.新拟物 checkbox 特效
效果:
视频地址一:https://www.bilibili.com/video/BV1iV411r7SD/
视频地址二:https://www.ixigua.com/i6833316731788722701/
41.clip-path 滚动特效
效果
视频地址一:https://www.bilibili.com/video/BV1tQ4y1P7DW/
视频地址二:https://www.ixigua.com/i6833685696041976323/
42.波浪div动画效果
效果
视频地址:https://www.ixigua.com/i6834042168265409027/
43.滚动倾斜的背景特效
效果
视频地址一:https://www.bilibili.com/video/BV17p4y1D7UA/
视频地址二:https://www.ixigua.com/i6834441977069568525/
44.计数器设计思路
效果:
视频地址一:https://www.bilibili.com/video/BV1vQ4y1P7SW/
视频地址二:https://www.ixigua.com/i6835920426430890499/
45.菜单悬停滑动特效
效果:
视频地址一:https://www.bilibili.com/video/BV1Sp4y1S7y7/
视频地址二 :https://www.ixigua.com/i6836281379467035147/
46.很棒的图标悬停特效
效果:
视频地址一:https://www.bilibili.com/video/BV1ef4y127k5/
视频地址二: https://www.ixigua.com/i6836657427052495373/
47.霓虹灯按钮动画效果的悬停
效果:
视频地址一:https://www.bilibili.com/video/BV15k4y1z7gW/
视频地址二:https://www.bilibili.com/video/BV15k4y1z7gW/
48.窗帘响应菜单特效
效果:
视频地址一:https://www.bilibili.com/video/BV1TT4y1J7qf/
视频地址二:https://www.ixigua.com/i6838419811442098700/
49.新拟物按钮悬停效果
效果:
视频地址一:https://www.bilibili.com/video/BV1fv411q7AT/
视频地址二:https://www.ixigua.com/i6838884535929668107/
50.新拟物卡片悬停特效
效果:
视频地址一:https://www.bilibili.com/video/BV1Df4y1y7am/
视频地址二:https://www.ixigua.com/i6839252135687750156/
51.3D图像翻转特效
效果:
视频地址一:https://www.ixigua.com/i6840006472894513676/
视频地址二:https://www.bilibili.com/video/BV15A411i7dU/
52.响应式剪贴蒙版视差滚动效果
效果:
视频地址一:https://www.ixigua.com/i6841112747518722568/
视频地址二:https://www.bilibili.com/video/BV1hv411677o/
53.网站夜间日间特效
效果:
视频地址一:https://www.ixigua.com/i6841112747518722568/
视频地址二:https://www.bilibili.com/video/BV1pa4y1Y7n9/
54.文本旋转动画效果
效果:
视频地址一:https://www.ixigua.com/i6841854545706877447/
视频地址二:https://www.bilibili.com/video/BV1iC4y1a7wW/
55.创意按钮悬停特效
效果:
视频地址一:https://mp.toutiao.com/profile_v3/xigua/content-manage
视频地址二:https://www.bilibili.com/video/BV1ZK411n7v7/
56.3D编辑文本特效
效果:
视频地址一:https://www.ixigua.com/i6843709475413557764/
视频地址二:https://www.bilibili.com/video/BV1oi4y1G7xz/
57.响应盒模型特效
效果:
58.数字时钟特效
效果:
视频地址一:https://www.ixigua.com/i6844451067896267278/
视频地址二:https://www.bilibili.com/video/BV1bp4y1U7fS/
59.弹出框与模糊的背景特效
效果
视频地址一:https://www.ixigua.com/i6845126624082395656/
视频地址二:https://www.bilibili.com/video/BV1bA411i75h/
60.如何在文字内放置视频
效果
视频地址一:https://www.ixigua.com/6846310483146998275/
视频地址二:https://www.bilibili.com/video/BV1B5411Y7A5/
61.反射属性-webkit-box-reflect应用
效果
视频地址一:https://www.ixigua.com/6847050168638898692/
视频地址二:https://www.bilibili.com/video/BV1iA411e7Dr/
62.渐变发光加载动画特效
效果
63.全屏加载页面动画特效
效果
视频地址一:https://www.ixigua.com/6848908900436017676/
视频地址二:https://www.bilibili.com/video/BV1zK4y1s7it/
64.圣诞节动画特效
效果
视频地址一:https://www.ixigua.com/6849270738138956299/
视频地址二:https://www.bilibili.com/video/BV1g5411e7yQ/
65.粘糊糊的动画效果
效果
视频地址一:https://www.ixigua.com/6850016080396714499/
视频地址二:https://www.bilibili.com/video/BV1wK4y1x7BY/
66.电视噪音动画特效
效果
视频地址一:https://www.ixigua.com/6850386816432865806/
视频地址二:https://www.bilibili.com/video/BV1Jv411q7oh/
人才们的 【三连】 就是小智不断分享的最大动力,如果本篇博客有任何错误和建议,欢迎人才们留言,最后,谢谢大家的观看。
所有特效源码:https://blog.csdn.net/qq449245884/category_9873715.html
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
交流
文章每周持续更新,可以微信搜索 【大迁世界 】 第一时间阅读,回复 【福利】 有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,欢迎Star。
The text was updated successfully, but these errors were encountered: