希望这里可以让你寻找到使用或者是学习 CSS 的灵感,以分类的形式,展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。
于我而言,是督促我自己每日学习 CSS 的地方,给自己的目标是每天更新。
CSS实现瀑布流布局(display: flex)
CSS实现瀑布流布局(column-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 实现圆环进度条动画
使用:not()
伪类实现弹窗背景元素模糊
使用 filter:blur 生成彩色阴影
使用 filter:blur | filter:constrast 生成特殊融合效果
使用 filter:blur | filter:constrast 生成火焰效果
活用 border-radius, 实现波浪动画
活用 border-radius, 实现波浪百分比图
border-radius 变换实现 loading 效果
渐变(linear-gradient/radial-gradient/conic-gradient)
线性渐变模拟长阴影
线性渐变实现条纹字
重复径向渐变实现波浪边框
渐变实现优惠券波浪造型
混合模式(mix-blend-mode/background-blend-mode)
mix-blend-mode 实现 loading 效果
mix-blend-mode 实现颜色叠加旋转动画
使用 mix-blend-mode 实现抖音 LOGO
动画/过渡(transition/animation)
借助transition-delay实现按钮border动画效果
CSS实现曲线运动