50
GitHub - chokcoco/CSS-Inspiration: CSS Inspiration，在这里找到写 CSS 的灵感！
source link: https://github.com/chokcoco/CSS-Inspiration
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 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 生成火焰效果
- 滤镜及混合模式混搭特效
边框(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)
SVG
综合
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK