CSS3实现的单div图标

最近研究纯css3实现绘图，无意中找到one-div.com,利用一个div去实现一个图标，如下图所示。牛，研究研究。

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

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

1.难点分析

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

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

2.实现步骤

a.html架构

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

很简单，一个单独的div

b.设置div

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

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

c. :before实现左侧的带子

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

d. :after实现右侧带子

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

e. 实现动画

.gift:hover:before{
	transform:rotate(-30deg);
}
.gift:hover:after{
	transform:rotate(30deg);
}

完工！

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

前端开发whqet制作。