本页目录
这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。
- 文档介绍：GitHub
- **示例文档：
**详情
在线预览
布局(Layout)
- CSS 实现瀑布流布局（display: flex）
- CSS 实现瀑布流布局（colum+count）
- CSS 实现瀑布流布局（display: grid）
- 多方案实现跨行或跨列布局
- 多种方案实现单列等宽，其他多列自适应均匀布局
- 多种方案实现多列等高布局
- 圣杯布局
- 圣杯布局（flex 实现）
- 双飞翼布局
- 实现水平垂直居中最便捷的方法
- 使用 margin auto 实现 flex 下的 justify-content: space-between
- 使用 margin auto 实现 flex 下的 align-self: flex-end
阴影(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()伪类实现弹窗背景元素模糊
- 使用:not()伪类控制特殊边框样式
- 伪类:focus-within 纯 CSS 方式实现掘金登陆特效
- 伪类 placeholder-shown 实现表单交互
- 伪元素配合 border 实现气泡对话框
- 伪类:checked 实现纯 CSS Tab 切换
- 伪类:target 实现纯 CSS Tab 切换
- 伪类:focus-within 实现纯 CSS Tab 切换
- 伪类:hover 实现纯 CSS 方式控制动画的暂停与播放
- 伪类:checked 实现纯 CSS 方式控制动画的暂停与播放
- 伪类:target 实现纯 CSS 方式控制动画的暂停与播放
- 借助伪元素实现边界智能判断移动
- 伪元素实现打点 loading 效果
- 伪元素遮罩实现线条 loading 效果
滤镜(fliter)
使用 blur | constrast 生成特殊融合效果
使用 blur | constrast 生成火焰效果
使用 blur | constrast 生成火焰效果 2
滤镜及混合模式混搭特效
使用 blur | constrast 单标签实现滴水效果
使用 blur | constrast 小球穿梭效果
使用 blur | constrast 小球穿梭放大 loading 动画
使用 hue-rotate 实现渐变背景动画
使用 drop-shadow 配合 clip-path 生成规则阴影
边框(border)
活用 border-radius, 实现波浪百分比图
活用 border-radius, 实现电池充电效果
border-radius 变换实现 loading 效果
border-color 变换实现文字输入效果
活用 border-radius, 单标签线条动画
使用 border-radius，模拟绳子下坠动画
使用 outline 巧妙实现加号符号
背景/渐变(linear-gradient/radial-gradient/conic-gradient)
重复径向渐变实现波浪边框
渐变实现波浪效果/波浪进度框
渐变实现优惠券波浪造型
线性渐变实现内切直角
线性渐变实现箭头符号
利用线性渐变实现下划线
利用渐变实现波浪下划线
使用 background-attachment 实现毛玻璃效果
使用渐变实现舞台灯光聚焦效果
圆锥渐变配合混合模式实现炫酷光影效果
mask-image 实现图片变幻
使用线性渐变实现滚动进度条
使用线性渐变实现类迷宫图形
使用线性渐变模拟进度条运动
混合模式（mix-blend-mode/background-blend-mode)
mix-blend-mode 实现颜色叠加旋转动画
使用 mix-blend-mode 实现抖音 LOGO
图片的类抖音 LOGO 晕眩效果
类抖音 LOGO 文字故障效果
使用 mix-blend-mode 实现图片任意颜色赋值技术
CSS MIX
3D
借助 translate3d\perspective 实现 3D 视差效果
借助 translate3d\perspective 实现 3D 视差效果 2
3D 球动画
3D 螺旋数字动画
3D 迷宫线条特效
3D 无限延伸视角动画
动画/过渡(transition/animation)
简单曲线运动
正负旋转相消动画
CSS 巧妙控制动画行进
scale 配合 transfrom-origin 精准控制动画方向