html css图标,神奇的纯CSS图标

图标,神奇的纯CSS图标"/>

html css图标,神奇的纯CSS图标

使用纯CSS的伪元素来创建简单的图标，这是一个比较有创意的做法，正如你在本站看到的评论数图标就是用:before和:after来制作的，下面分享一个国外的朋友制作了84个常用图标。

制作说明

该代码为实验性代码，不适应用在生产环境中，更多是作为一个练习性的作品，兼容: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+.

代码思路：

主要是通过设置元素为position:relative;设置:before 和 :after为position:absolute;然后通过CSS相关的background、border、border-radius、transform:rotate()、和z-index来交叉生成，让我们不得不感叹神奇的CSS世界。来看看其中一个是怎么写的。

HTML代码：

• Power
• Play
• Stop
• Pause

CSS代码：

.expand a:before {

content: "";

position: absolute;

top: 50%;

left: 1px;

width: 5px;

height: 0;

border-width: 7px 7px 0;

border-style: solid;

border-color: transparent #c55500;

margin-top: -4px;

/* css3 */

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.expand a:after {

content: "";

position: absolute;

top: 50%;

left: 5px;

width: 8px;

height: 8px;

border-width: 3px 0 0 3px;

border-style: solid;

border-color: #c55500;

margin-top: -6px;

}

.expand a:hover:before,

.expand a:focus:before,

.expand a:active:before {

border-color: transparent #730800;

}

.expand a:hover:after,

.expand a:focus:after,

.expand a:active:after {

border-color: #730800;

}

案例：

还有更多的纯css背景气泡、纯CSS媒体社交图标、不用图片的阴影、纯CSS边角效果

[dmengl2v]纯CSS图标，来源：/

纯CSS背景气泡

纯CSS媒体社交图标

不用背景的阴影

边角效果

[/dmengl2v]