rainyxy / css-inspiration

CSS Inspiration，在这里找到写 CSS 的灵感！

CSS-Inspiration

希望这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。

于我而言，是督促我自己每日学习 CSS 的地方，给自己的目标是每天更新。

Layout

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 实现圆环进度条动画

滤镜(fliter)

filter:blur

使用 filter:blur 生成彩色阴影

blur && constrast

使用 filter:blur | filter:constrast 生成特殊融合效果

使用 filter:blur | filter:constrast 生成火焰效果

边框(border)

活用 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 实现颜色叠加旋转动画

动画/过渡(transition/animation)

借助transition-delay实现按钮border动画效果

CSS实现曲线运动