chokcoco / CSS-Inspiration
- пятница, 11 января 2019 г. в 00:18:02
https://github.com/chokcoco/CSS-Inspiration
JavaScript
CSS Inspiration，在这里找到写 CSS 的灵感！
这里可以让你寻找到使用或者是学习 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