令你惊叹的CSS技巧大全
令你惊叹的CSS技巧大全 - alphardex的文章 - 知乎
https://zhuanlan.zhihu.com/p/92721841
动画
利用不同的delay实现交错动画
文本
利用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实现曲边导航栏
利用动画和绝对定位实现汉堡菜单
利用伪元素和动画实现动态划线效果
利用伪元素和overflow:hidden实现交错分割文本菜单
利用伪元素和overflow:hidden实现填充按钮
利用伪元素、渐变和overflow:hidden实现闪光按钮
利用绝对定位、动画、渐变和overflow:hidden实现蛇形边框按钮
利用伪元素、渐变、背景运动实现动态渐变边框
利用oveflow:hidden、max-height和:target实现手风琴菜单
利用overflow:hidden和scroll相关属性实现无缝轮播图
利用兄弟选择器配合伪元素自定义单复选框
利用box-shadow实现各种按钮悬浮特效
利用多重box-shadow阴影实现发光按钮菜单
利用counter在伪元素的content中显示var的值
利用-webkit-slider-thumb定制滑块
利用伪类校验表单
利用绝对定位实现特殊的表单和按钮
利用动画实现卡片展开
利用clip-path实现卡片多方向展开
利用没有perspective的transform-style:preserve-3d实现等距3D效果
利用3D变换实现3D下拉菜单
利用动画和JS实现简单的分页栏
利用伪元素、overflow:hidden、动画、JS实现标签页
利用伪元素、:checked、~兄弟选择器实现5星评分
运用伪元素、层叠关系、3D变换、JS实现翻牌时钟
