mouyaya / CSS-Inspiration

CSS Inspiration,在这里找到写 CSS 的灵感!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

伪类/伪元素

使用:not()伪类实现弹窗背景元素模糊

滤镜(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 实现颜色叠加旋转动画

使用 mix-blend-mode 实现抖音 LOGO

动画/过渡(transition/animation)

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

CSS实现曲线运动

About

CSS Inspiration,在这里找到写 CSS 的灵感!