先上资源地址：https://github.com/chokcoco/CSS-Inspiration

这个资源是众多的CSS特效实现方法。

布局，动态特效，模糊等等。如果想要提高自己的CSS水平，可以关注研究下实现。

Layout

• CSS实现瀑布流布局（display: flex）
• CSS实现瀑布流布局（colum+count）
• CSS实现瀑布流布局（display: grid）
• 多方案实现跨行或跨列布局
• 多种方案实现单列等宽，其他多列自适应均匀布局
• 多种方案实现多列等高布局
• 圣杯布局
• 圣杯布局（flex实现）
• 双飞翼布局

阴影(box-shadow、drop-shadow)

• 单侧投影
• 立体投影
• 文字立体投影
• 长阴影(线性渐变模拟)
• 线性渐变|阴影实现条纹立体阴影条纹字
• 使用 box-shadow 实现半透明遮罩
• box-shadow 实现背景动画
• box-shadow 模拟实现类似线性渐变背景动画
• box-shadow 模拟霓虹氙灯文字效果
• 单标签借助 inset shdow 实现IE LOGO
• 借助 filter:drop-shadow ，单标签实现抖音 LOGO
• Box-shadow 实现圆环进度条动画
• 使用box-shadow/渐变实现内切圆角

伪类/伪元素

• 使用:not()伪类实现弹窗背景元素模糊
• 伪类:focus-within纯 CSS 方式实现掘金登陆特效
• 伪类placeholder-shown实现表单交互
• 伪元素配合 border 实现气泡对话框
• 伪类:checked实现纯 CSS Tab 切换
• 伪类:target实现纯 CSS Tab 切换
• 伪类:focus-within实现纯 CSS Tab 切换
• 伪类:hover实现纯 CSS 方式控制动画的暂停与播放
• 伪类:checked实现纯 CSS 方式控制动画的暂停与播放
• 伪类:target实现纯 CSS 方式控制动画的暂停与播放

滤镜(fliter)

• 使用 filter:blur 生成彩色阴影
• 使用 filter:blur | filter:constrast 生成特殊融合效果
• 使用 filter:blur | filter:constrast 生成火焰效果
• 滤镜及混合模式混搭特效
• 使用 filter:blur | filter:constrast 单标签实现滴水效果

边框(border)

• 活用 border-radius, 实现波浪动画
• 活用 border-radius, 实现波浪百分比图
• border-radius 变换实现 loading 效果
• border-color 变换实现文字输入效果

背景/渐变(linear-gradient/radial-gradient/conic-gradient)

• 线性渐变实现条纹字
• 重复径向渐变实现波浪边框
• 渐变实现波浪效果/波浪进度框
• 渐变实现优惠券波浪造型
• 线性渐变实现内切直角
• 线性渐变实现箭头符号
• 利用线性渐变实现下划线
• 使用 background-attachment 实现毛玻璃效果
• 使用渐变实现舞台灯光聚焦效果
• 圆锥渐变配合混合模式实现炫酷光影效果
• mask-image 实现图片变幻
• 使用线性渐变实现滚动进度条

混合模式（mix-blend-mode/background-blend-mode)

• mix-blend-mode 实现 loading 效果
• mix-blend-mode 实现颜色叠加旋转动画
• 使用 mix-blend-mode 实现抖音 LOGO
• 类抖音 LOGO 晕眩效果
• 使用 mix-blend-mode 实现图片任意颜色赋值技术
• CSS MIX
• CSS MAGIC MIX
• CSS MAGIC MIX2
• CSS WAVE MOVE(惊艳的水波效果)

3D

• 使用 translateZ 实现滚动视差
• 借助 translate3d\perspective 实现 3D 视差效果
• 借助 translate3d\perspective 实现 3D 视差效果2
• 3d 球动画
• 3D Spiral Number

动画/过渡(transition/animation)

• 借助transition-delay实现按钮border动画效果
• 简单曲线运动
• 借助transition-delay简单多重圆的位移
• 动画正负旋转相消

SVG

• 使用 SVG 实现文字弧形排列

综合

• retina屏下的1px线的实现
• MAGIC CSS MIX
• PURE CSS 实现鼠标跟随
• 鼠标跟随动画 PURE CSS MAGIC MIX
• CSS文字分裂特效
• CSS TEXT Animation