css图形制作

css3

浏览数:3,148

2018-1-2

AD：百G视频免费分享

心形

利用 圆形 和 正方形实现

.heartShaped

气泡三角形

利用 border 的 transparent 特性实现

.bubbly

切角 使用线性渐变实现

.notching

弧形切角

使用径向渐变实现

.arc

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

利用伪类及透明度实现

.pesudo

梯形

利用伪类加旋转透视实现

.trapezoid

饼图

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

.pie

平行四边形

利用伪类、拉伸实现

.parallelogram

菱形

利用伪类、旋转实现

.diamond

折角

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

.corner

spectiveBlur

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

.spectiveBlur

条纹背景图

利用渐变实现

.stripe

条纹背景图

利用渐变实现

.wave-stripe

条纹背景图

利用渐变实现

.arrow-stripe

混合模式背景图

利用渐变实现

.colorful-stripe

随机背景图

利用渐变、蝉随机实现

.random-stripe

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

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

.sun

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

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

.cloudy

cloudy 阴影实现多云天气图案

多云（cloudy2）（单标签实现） 利用线性渐变、阴影、缩放实现

.cloudy2

阴影实现雨天天气图案

雨（rainy） 利用线性渐变、阴影、缩放实现

.rainy

breeze 利用border、transparent、实现微风天气图案

微风（breeze） 利用border、transparent、实现

.breeze

rainbow 利用border、box-shadow 实现彩虹天气图案

彩虹（rainbow） 利用border、box-shadow 实现

.rainbow

starry 利用 box-shadow 实现彩虹天气图案

夜空璀璨（starry） 利用 box-shadow 实现

.starry

thunder 阴影、border实现雷电天气图案

雷电（thunder） 利用阴影、border实现

.thunder

snowy 阴影实现雪天天气图案

雪（snowy） 利用阴影实现

.snowy

five-star 利用border、transparent、旋转实现

五角星（单标签实现） 利用border、transparent、旋转实现

TaiChi 利用border、transparent、旋转实现太极图

太极图（单标签实现） 利用 box-shadow 实现

captainAmerica 利用渐变实现美队盾牌

美队盾牌（单标签实现） 利用 渐变 实现

button 利用渐变、阴影实现纽扣

纽扣（单标签实现） 利用 渐变、阴影 实现

chrome 利用渐变实现 chrome 浏览器图标

Chrome（单标签实现） 利用渐变实现

Opera 利用渐变实现 Opera 浏览器图标

Opera（单标签实现） 利用渐变、实现

IE 利用渐变实现 IE 浏览器图标

IE（单标签实现） 利用渐变、多重阴影实现

safari 利用渐变实现 safari 浏览器图标

safari（单标签实现） 利用渐变、border、旋转实现

sogou 利用渐变实现 sogou 浏览器图标

sogou（单标签实现） 利用文字、阴影实现

firefox 利用渐变实现 firefox 浏览器图标

firefox（单标签实现） 利用多重阴影实现

http://sbco.cc/magicCss/html/index.html

相关推荐

jquery和原生dom对象的转换&常用函数方法

javascript/jquery

2018-12-12

如何用纯 CSS 创作一个菱形 loader 动画

特效实现

2018-11-23

如何用纯 CSS 创作一个悬停时右移的按钮特效

特效实现

2018-12-10

2018年最佳JavaScript数据可视化和图表库

插件应用

2018-10-30

vue.js响应式原理解析与实现—实现v-model与{{}}指令

框架

2018-10-31