令你惊叹的CSS技巧大全 - alphardex的文章 - 知乎 https://zhuanlan.zhihu.com/p/92721841
动画
利用不同的delay实现交错动画
- Reveal Text
- Staggered Stair Loading
- Staggered Square Loading
- Staggered Wave Loading
- Gleaming Loading
- Particle Burst
- Gleaming Heading
- Share Button
- Staggered Shrinking Loading
文本
利用background-clip:text配合color实现渐变文字效果
利用动态hsl颜色实现彩虹文字效果
利用text-shadow实现发光文字效果
利用text-shadow实现伪3D文字效果
利用web animation实现冒泡文字效果
利用动态max-width实现文本展开效果
利用绝对定位、3D变换和JS实现翻转文字
视觉
利用backdrop-filter实现毛玻璃背景效果
利用背景、绝对定位和filter实现毛玻璃景深效果
利用blur和contrast滤镜实现融合效果
利用元素叠加blur滤镜实现日光效果
利用mix-blend-mode:screen实现文本遮罩效果
组件
利用border-radius实现曲边导航栏
利用动画和绝对定位实现汉堡菜单
利用伪元素和动画实现动态划线效果
- Menu Hover Underline
- Menu Hover Magnify
- Button Hover Border Stroke With Float Text
- Header With Slide Bar