CSS-Inspiration
CSS-Inspiration copied to clipboard
Published
20 hours ago •
chokcoco
chokcoco
CSS Inspiration，在这里找到写 CSS 的灵感！
这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。
在线预览
布局（Layout）
- 实现水平垂直居中最便捷的方法
- 双飞翼布局
- grid 布局配合 clip-path 实现 GTA5 封面
- flex 实现圣杯布局
- 圣杯布局
- CSS实现瀑布流布局（column-count）
- CSS 实现瀑布流布局（display: flex）
- CSS实现瀑布流布局（display: grid）
- 6种实现多列等高的方法
- 多方案实现跨行或跨列布局
- 多种方案实现单列等宽，其他多列自适应均匀布局
- 使用 margin auto 实现 flex 下的 align-self: flex-end
- 使用 margin auto 实现 flex 下的 justify-content: space-between
阴影(box-shadow、drop-shadow)
- Box-shadow实现圆环进度条动画
- 使用box-shadow/渐变实现内切角
- Neon Effect 3D TEXT
- box-shadow实现霓虹氖灯文字效果
- 使用 box-shadow 实现半透明遮罩
- 线性渐变模拟长阴影
- 单侧投影
- 立体投影
- 线性渐变配合阴影实现条纹立体阴影条纹字
- 立体文字阴影
- 浮雕风格按钮
- box-shadow实现背景动画 2
- box-shadow实现背景动画
- 单标签实现抖音LOGO
- 单标签实现叉子图形
- 单标签借助 inset shadow 实现IE LOGO
伪类/伪元素
- 伪元素 hover 实现纯 CSS 方式控制动画的暂停与播放
- 伪元素 target 实现纯 CSS 方式控制动画的暂停与播放
- 伪元素 checked 实现纯 CSS 方式控制动画的暂停与播放
- 伪元素实现边界智能判断移动
- 伪元素+border实现气泡对话框
- 使用 checked 伪类实现纯 CSS Tab 切换
- 使用 target 伪类实现纯 CSS Tab 切换
- placeholder-shown 配合 focus-within 实现 input 输入交互
- focus-within switch tab
- 伪元素 focus-within 纯 CSS 方式实现掘金登陆特效
- 伪元素实现打点 loading 效果
- 伪元素遮罩实现线条 loading 效果
- 使用:not()伪类控制特殊边框样式
- 使用:not()伪类实现弹窗背景元素模糊
滤镜(fliter)
- 小球穿梭放大loading动画
- 小球穿梭效果
- 使用 filter:blur | filter:constrast 生成特殊融合效果
- 使用 filter:blur | filter:constrast 生成火焰效果2
- 使用 filter:blur | filter:constrast 生成火焰效果
- 单标签纯CSS实现幽灵动画
- 使用 hue-rotate 实现渐变背景动画
- 滤镜及混合模式混搭特效
- 使用 drop-shadow 配合 clip-path 生成规则阴影
- 使用 filter:blur 生成彩色阴影
- 单标签实现滴水效果
- 利用 filter:blur 增强文字的 3D 效果
边框
- 活用 border-radius, 实现充电动画
- 利用 border-image 实现动态边框
- 活用 border-radius, 单标签线条动画
- 使用 border-radius 的变化模拟绳子下坠
- border-radius变换实现loading效果
- 活用 outline 巧妙实现加号符号
- 巧用 overflow 及实现边框线条动画
- border-color 变换实现文字输入效果
- 活用 border-radius, 实现波浪百分比图
- 活用 border-radius, 实现波浪动画
背景/渐变(linear-gradient/radial-gradient/conic-gradient)
- 利用渐变及 CSS Property 实现 TV 噪音动画
- 使用 background-attachment 实现毛玻璃效果
- 使用 background-attachment 实现滚动阴影
- background-clip 实现流光文字效果
- 角向渐变线条 border 效果
- 角向渐变实现光影 border 效果
- 角向渐变实现纯 CSS 圆环进度图
- 角向渐变配合混合模式实现炫酷光影效果
- 一行代码重复角向渐变代码实现酷炫图案
- 线性渐变实现箭头符号
- 线性渐变线条 border 效果
- 线性渐变实现类迷宫图形
- 线性渐变实现内切角
- 线性渐变模拟进度条运动
- 线性渐变实现滚动进度条
- 线性渐变背景实现条纹字
- 线性渐变实现下划线
- mask-image 实现图片变幻
- mask-image 实现文字的渐现
- mask-image 实现图片转场变换
- 使用多重背景单标签实现气泡按钮点击效果
- 径向渐变实现优惠券波浪造型
- 径向渐变实现舞台灯光聚焦效果
- 渐变实现波浪边框
- 渐变实现波浪下划线
- 渐变实现波浪效果/波浪进度框
- 利用 CSS @property 探寻渐变的极限效果
- 多重径向渐变实现美妙的艺术背景
混合模式（mix-blend-mode/background-blend-mode)
- 使用 mix-blend-mode 实现图片任意颜色赋值技术
- 使用 mix-blend-mode 实现抖音 LOGO
- mix-blend-mode 实现 loading 效果
- 图片的类抖音 LOGO 晕眩效果
- mix-blend-mode MIX
- mix-blend-mode 实现颜色叠加旋转动画
- 类抖音 LOGO 文字故障效果
- 使用 mix-blend-mode 实现光影文字效果
- CSS WAVE MOVE(惊艳的水波效果)
- mix-blend-mode 叠加多重渐变背景
- 使用混合模式叠加实现文字波浪效果
3D
- 3D 球动画
- 3D 数字计数动画
- 3D 宇宙时空穿梭效果
- 3D 立方体进度条
- 3D 立方体滚动 404 效果
- 3D 光影变换文字效果
- 3D 无限延伸视角动画
- 3D 线条动画
- 3D 迷宫线条特效
- 3D 绳动画
- 3D 螺旋数字动画
- 3D 文字出场动画
- 借助 translate3d\perspective 实现 3D 视差效果
- 借助 translate3d\perspective 实现 3D 视差效果2
- 使用 translateZ 实现滚动视差
动画/过渡(transition/animation)
- 借助transition-delay实现按钮border动画效果
- CSS实现曲线运动
- 利用 animation-delay 实现文字渐现效果
- 利用动画延迟实现波浪动画
- scale 配合 transfrom-origin 精准控制动画方向
- CSS 巧妙控制动画行进
- 正负旋转相消动画
clip-path
- 使用 clip-path 和 border-image 实现圆角渐变边框
- clip-path 实现边框线条动画 2
- clip-path 实现边框线条动画
- clip-path 实现图片的故障艺术风格动画
- clip-path 实现文字断裂效果
文本类
综合
- retina屏下的1px线的实现
- fieldset 与 legend 实现边框嵌套文字
- 利用 resize 实现图片切换预览功能
- 暗黑字符雨动画
- chrome Tab 分栏实现
- 等角螺线
- 华为充电动画
- 夜晚居室图
- 纯CSS实现360°饼图
- PURE CSS 实现鼠标跟随2
- PURE CSS 实现鼠标跟随3
- PURE CSS 实现鼠标跟随
- 利用 box-reflect 实现艺术图形
- 利用 box-reflect 实现光影按钮
- 利用 box-reflect 实现 3D 照片墙倒影效果
- CSS文字分裂移动特效
- CSS文字分裂特效
- CSS文字故障效果
CSS-Doodle
- CSS-Doodle clip-path & drop-shadow 实现图案艺术
- CSS-Doodle 利用不同图形线条实现图案艺术 2
- CSS-Doodle 利用不同图形线条实现图案艺术
- CSS-Doodle background + mask 实现万花筒效果
- CSS-Doodle background + mask 实现条纹艺术背景
- CSS-Doodle fish 🐟 & seaweed 🍀
- CSS-Doodle spotlight🎆
- 夏日城市夕阳图🌇
chokcoco