下载地址: http://www./css3/css3donghua/201505201871.html
这是一组使用纯CSS3制作的精美的扁平风格的圆形图标。这些圆形图标都是使用CSS的伪元素来制作,是一套以家居为主题的图标,包括门窗,邮箱,浴室,台灯书柜等等10个图标。
制作方法
HTML结构
图标的HTML结构非常简单。<div> 作为包裹元素,里面的图标内容使用<span> 元素来制作。
< div class = "i1" >
< span class = "cortinas" ></ span >
</ div >
|
CSS样式
以第一个图标为例,先设置包裹<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
}
|
通过上面的设置,一个扁平风格的圆形图标就诞生了,是不是横神奇呢?
|