下载地址: http://www.htmleaf.com/css3/css3donghua/201505201871.html
这是一组使用纯CSS3制作的精美的扁平风格的圆形图标。这些圆形图标都是使用CSS的伪元素来制作,是一套以家居为主题的图标,包括门窗,邮箱,浴室,台灯书柜等等10个图标。
图标的HTML结构非常简单。<div>
作为包裹元素,里面的图标内容使用<span>
元素来制作。
< div class = "i1" > < span class = "cortinas" ></ span > </ div > |
以第一个图标为例,先设置包裹<div>
元素的基本样式。将它设置为圆形。窗口部分是用.i1
来设置,窗口的横条使用.i1::before
来设置,窗口的竖条使用.i1::after
来设置。
.i 1 { position : absolute ; width : 55px ; height : 70px ; border : 5px solid #1ac2ff ; margin : 25px 33px ; } .i 1: :before{ content : "" ; display : block ; width : 5px ; height : 70px ; background : #1ac2ff ; margin : 0 25px } .i 1: :after{ content : "" ; display : block ; width : 55px ; height : 5px ; background : #1ac2ff ; margin : -37px 0px } |
接着是门部分。门上边的红色线条是.cortinas
来设置,左边门柱是.cortinas::before
来设置,右边门柱是.cortinas::after
来设置。
.cortinas{ position : absolute ; width : 70px ; height : 5px ; background : #ff5675 ; margin : -83px -7px ; } .cortinas::before{ content : "" ; display : block ; width : 12px ; height : 95px ; background :rgba( 255 , 255 , 255 , . 3 ); margin : 0 0 ; } .cortinas::after{ content : "" ; display : block ; width : 12px ; height : 95px ; background :rgba( 255 , 255 , 255 , . 3 ); margin : -95px 57px } |
通过上面的设置,一个扁平风格的圆形图标就诞生了,是不是横神奇呢?
联系客服