这是一组使用纯CSS3制作的扁平风格的图标。这组图标共有16个,所有图标均由CSS渲染而成,没有使用任何图片。其中有5个图标在鼠标滑过时带有动画特效。
使用方法
HTML结构
所有的图标都是以div.icon
作为包裹容器,里面放置需要的元素。在email图效果中,它的HTML结构如下:
<div class="icon"> <div class="mail"> <div class="shadows"></div> </div> </div>
CSS样式
email图标的CSS样式也非常简单:div.mail
元素是整个信封的主体,它设置了固定的宽度和高度,并设置了一个小圆角和一些阴影效果。
.mail:before { content:""; width: 0; height: 0; position:absolute; top:6px; border-left: 54px solid transparent; border-right: 54px solid transparent; border-top: 50px solid rgba(0,0,0,0.3); } .mail:after { content:""; width: 0; height: 0; position:absolute; top:6px; border-left: 54px solid transparent; border-right: 54px solid transparent; border-top: 39px solid #eeecdf; }
信封的阴影由三个部分组成:.shadows
元素是下方的三角形阴影,.shadows::after
是左侧的三角形阴影,.shadows::before
是右侧的三角形阴影。
.mail .shadows { width: 0; height: 0; border-left: 42px solid transparent; border-right: 42px solid transparent; border-bottom: 30px solid rgba(0,0,0,0.12); position:absolute; bottom:0; left:50%; margin-left:-42px; } .mail .shadows:after { content:""; position:absolute; left:-54px; top:-41px; width: 0; height: 0; border-top: 41px solid transparent; border-left: 54px solid rgba(0,0,0,0.06); border-bottom: 39px solid transparent; } .mail .shadows:before { content:""; position:absolute; right:-54px; top:-42px; width: 0; height: 0; border-top: 42px solid transparent; border-right: 54px solid rgba(0,0,0,0.2); border-bottom: 39px solid transparent; }
在styles.css文件中有所有图标对应的CSS样式,使用哪个图标可以直接引入相应的样式即可。