心形

利用 圆形 和 正方形实现

.heartShaped

气泡三角形

利用 border 的 transparent 特性实现

.bubbly

切角

使用线性渐变实现

.notching

弧形切角

使用径向渐变实现

.arc

单个颜色实现 hover 和 active 时的明暗变化效果

利用伪类及透明度实现

.pesudo

梯形

利用伪类加旋转透视实现

.trapezoid

饼图

利用伪类、线性渐变、旋转实现

.pie

平行四边形

利用伪类、拉伸实现

.parallelogram

菱形

利用伪类、旋转实现

.diamond

折角

利用切角、伪类、渐变、旋转实现

.corner

下划线

利用 background-image 实现

.underline1-ajkpys

.underline2-ajkpys

.underline3-ajkpys

线条 loading

利用 border / 伪元素 实现

spectiveBlur

纯 CSS 方案实现背景变暗效果（hover按钮触发）

.spectiveBlur

条纹背景图

利用渐变实现

.stripe

条纹背景图

利用渐变实现

.wave-stripe

条纹背景图

利用渐变实现

.arrow-stripe

随机背景图

利用渐变、蝉随机实现

.random-stripe

渐变背景色动画

利用滤镜hue-rotate实现

.colorful-stripe

晴天（sun）（单标签实现）

利用线性渐变、阴影、旋转实现

.sun

多云（cloudy）（单标签实现）

利用线性渐变、阴影、缩放实现

.cloudy

多云（cloudy2）（单标签实现）

利用线性渐变、阴影、缩放实现

.cloudy2

雨（rainy）

利用线性渐变、阴影、缩放实现

.rainy

微风（breeze）

利用border、transparent、实现

.breeze

彩虹（rainbow）

利用border、box-shadow 实现

.rainbow

夜空璀璨（starry）

利用 box-shadow 实现

.starry

雷电（thunder）

利用阴影、border实现

.thunder

雪（snowy）

利用阴影实现

.snowy

五角星（单标签实现）

利用border、transparent、旋转实现

太极图（单标签实现）

利用 box-shadow 实现

美队盾牌（单标签实现）

利用 渐变 实现

纽扣（单标签实现）

利用 渐变、阴影 实现

Chrome（单标签实现）

利用渐变实现

Opera（单标签实现）

利用渐变、实现

IE（单标签实现）

利用渐变、多重阴影实现

safari（单标签实现）

利用渐变、border、旋转实现

sogou（单标签实现）

利用文字、阴影实现

firefox（单标签实现）

利用多重阴影实现

波浪水纹效果（单标签实现）

利用 background-size 、缩放、背景图 实现

如果没有单标签的限制，可以制作多道波纹，效果更真实

利用滤镜实现混合效果（单标签实现）

利用 fliter:blur() 、filter:contrast() 实现

看不到效果请用 chrome，请用 chrome！

纯CSS实现title属性hover效果（单标签实现）

利用伪元素 content 的可读取 attr 特性

鼠标hover文字可看到效果，使用审查元素查看HTML结构

Hover ME

文字故障效果

一种CSS效果，仿电脑屏幕出故障了的样子

CSSTextMagic

单标签实现抖音LOGO

借助了两个伪元素实现了整体结构

借助了 shadow 生成另外两层整体阴影

单标签幽灵图👻

利用径向渐变 / 伪元素 / 滤镜实现

单标签实现滴水效果

借助了滤镜 blur, contrast

MAGICCSS

单标签实现水波效果

借助了滤镜 blur, contrast

借助了混合模式background-blend-mode: difference

实现霓虹氖灯文字效果

借助了box-shadow

Box-Shadow