CSS3实现的单div图标

喜欢ヅ旅行 2022-02-27 12:03 287阅读 0赞

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

![20130505091823607][]

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

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

![20130505190052981][]

1.难点分析

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

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

2.实现步骤

a.html架构

很简单，一个单独的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][]。一个元素可以设置多个阴影，某个阴影可以设置为内阴影或者外阴影。具体语法如下图所示。

![20130505100333324][]

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制作。

[one-div.com]: http://one-div.com/
[20130505091823607]: /images/20220227/174423397fb04324b8fd25562ca3db34.png
[demo]: http://gx.zptc.cn/whqet/icon.html
[20130505190052981]: /images/20220227/c0ec8c74e6d643caa7d231f5c14fa08a.png
[box-shadow]: http://css.doyoe.com/properties/border/box-shadow.htm
[20130505100333324]: /images/20220227/55ca2d2ddf20464bb0f805e533046c60.png