CSS3实现的单div图标

利用css实现的icon可以方便的进行缩放而不失真，同时添加动画效果也变得轻而易举。

下面来实现下礼品的这个，--demo--

1.难点分析

一个div实现这个效果，刚开始会不够用，尤其是礼品盒下面的四个盒子。

div做一个矩形，剩下的几个用box-shadow来实现，很有意思。

2.实现步骤

a.html架构

[html]  view plain copy print ?

1. <div class="gift"></div>  

很简单，一个单独的div

b.设置div

[css]  view plain copy print ?

1. .gift{  
2.     margin: 200px;       //设置元素定位，具体应用中需要修改  
3.     width: 2em;          //设置宽、高、背景色  
4.     height: 1em;  
5.     background: #000;  
6.     position: relative;  //设置相对定位，主要是为了让:before和:after元素以它为基准定位  
7.     box-shadow:   
8.         2.2em 0 0 rgba(0,0,0,1),  
9.         0 1.2em 0 rgba(0,0,0,1),  
10.         2.2em 1.2em 0 rgba(0,0,0,1),  
11.         -0.1em -0.6em 0 0.1em rgba(0,0,0,1),  
12.         2.3em -0.6em 0 0.1em rgba(0,0,0,1);    //阴影实现礼品盒下面的矩形  
13.     cursor: pointer;    //鼠标形状改变  
14. }  

重点解释下box-shadow。一个元素可以设置多个阴影，某个阴影可以设置为内阴影或者外阴影。具体语法如下图所示。

c. :before实现左侧的带子

[css]  view plain copy print ?

1. .gift:before{  
2.     content:" ";  
3.     width: 0.4em;  
4.     height: 1.5em;  
5.     border:0.4em solid #000;  
6.     border-width: .4em .2em .4em .4em;            //利用边框的不同宽度实现粗细线效果  
7.     border-radius: 50%;                           //利用圆角边框实现椭圆  
8.     position: absolute;                           //实现定位  
9.     left: 1.5em;  
10.     top: -3.2em;  
11.     transform:rotate(-45deg);                     //实现旋转45度  
12.     transform-origin:right bottom;  
13.     transition:all .5s ease;  
14. }  

d. :after实现右侧带子

[css]  view plain copy print ?

1. .gift:after{  
2.     content:" ";  
3.     width: 0.4em;  
4.     height: 1.5em;  
5.     border:0.16em solid #000;  
6.     border-width: .4em .4em .4em .2em;  
7.     border-radius: 50%;  
8.     position: absolute;  
9.     left: 1.8em;  
10.     top: -3.2em;  
11.     transform:rotate(45deg);                     //反方向旋转   
12.     transform-origin:left bottom;  
13.     transition:all .5s ease;  
14. }  

e. 实现动画

[css]  view plain copy print ?

1. .gift:hover:before{  
2.     transform:rotate(-30deg);  
3. }  
4. .gift:hover:after{  
5.     transform:rotate(30deg);  
6. }  

完工！

感谢one-div提供灵感，感谢doyoe为css3在中国的普及所做的工作。

前端开发whqet制作。