CSS3奇思妙想,使用CSS3实现各类图形

心形 利用 圆形 和 正方形实现

.heartShaped

气泡三角形 利用 border 的 transparent 特性实现

.bubbly

切角 使用线性渐变实现

.notching

弧形切角 使用径向渐变实现

.arc

单个颜色实现 hover 和 active 时的明暗变化效果 利用伪类及透明度实现

.pesudo

梯形 利用伪类加旋转透视实现

.trapezoid

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

.pie

平行四边形 利用伪类、拉伸实现

.parallelogram

菱形 利用伪类、旋转实现

.diamond

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

.corner

下划线 利用 background-image 实现

.underline1-ajkpys

.underline2-ajkpys

.underline3-ajkpys

spectiveBlur 纯 CSS 方案实现背景变暗效果(hover按钮触发)

.spectiveBlur

条纹背景图 利用渐变实现

.stripe

条纹背景图 利用渐变实现

.wave-stripe

条纹背景图 利用渐变实现

.arrow-stripe

混合模式背景图 利用渐变实现

.colorful-stripe

随机背景图 利用渐变、蝉随机实现

.random-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