前言
CSS 是一门很特殊的语言，不像一般的编程语言那样需要抽象的思维和严密的逻辑，它真正需要的是想象力——将你脑中所想的意象用代码来表现出来。那么意象又是如何产生的呢？最常用的方法就是探索和观察。举个例子，笔者平时热爱看番，每看到有意思的场景画面总会下意识地记录下来，这对动画创作会非常有帮助；同样地，一旦笔者发现一个制作精良的网站，也会将网站上那些吸引人的元素仔细审查一遍，灵感也自然就有了。
演示网址 1：codepen
演示网址 2：shiroi
源码地址：github
本文的技巧将不会止步于 72 个。灵感不息，创作不止。
注意
兼容性
本文的所有技巧都未考虑兼容性，因为个人认为兼容性是一种束缚，它会妨碍你写出优秀的作品。如果硬是要考虑的话请自行解决，这个网站或许能帮到你。
框架
本文所用到的技巧皆是 SCSS+TypeScript。如果想移植到 React 或 Vue 上的话请根据框架本身的特点自行适配。笔者不用这类框架的原因很简单：框架很容易就会过时，原生 CSS+JS 才是王道。
教程
笔者实在是不擅长写这类东西，不过倒是可以把常用的属性和模式列出来，供大家参考参考。
常用属性：猛戳这里
常用模式：猛戳这里
动画
利用不同的delay实现交错动画
- Reveal Text
- Staggered Stair Loading
- Staggered Square Loading
- Staggered Wave Loading
- Gleaming Loading
- Particle Burst
- Gleaming Heading
- Staggered Shrinking Loading
- Snow
- Staggered Rise In Text
- Staggered LandIn Text
文本
利用background-clip:text配合color实现渐变文字效果
利用动态hsl颜色实现彩虹文字效果
利用text-shadow实现发光文字效果
利用text-shadow实现伪 3D 文字效果
利用web animation实现冒泡文字效果
利用动态max-width实现文本展开效果
利用绝对定位、3D 变换和 JS 实现翻转文字
视觉
利用backdrop-filter实现毛玻璃背景效果
利用背景、绝对定位和filter实现毛玻璃景深效果
利用blur和contrast滤镜实现融合效果
利用元素叠加blur滤镜实现日光效果
- Eclipse Loader
- Glowing List Hover
- Glowing Gradient Border
- Glowing Gradient Button
- Crimson Crescent Loading
利用mix-blend-mode:screen实现文本遮罩效果
利用-webkit-box-reflect实现倒影效果
页面
利用 3D 变换实现视差效果
利用position:sticky实现粘性滚动效果
利用绝对定位和交错动画实现镜头拉伸背景效果
利用伪元素、绝对定位和动画实现滑动幻灯片
组件
利用border-radius实现曲边导航栏
利用动画和绝对定位实现汉堡菜单
利用伪元素和动画实现动态划线效果
- Menu Hover Underline
- Menu Hover Magnify
- Button Hover Border Stroke With Float Text
- Header With Slide Bar
- Button Hover Multiple Border Stroke