利用css实现的icon可以方便的进行缩放而不失真,同时添加动画效果也变得轻而易举。
下面来实现下礼品的这个,--demo--
1.难点分析
一个div实现这个效果,刚开始会不够用,尤其是礼品盒下面的四个盒子。
div做一个矩形,剩下的几个用box-shadow来实现,很有意思。
2.实现步骤
a.html架构
- <div class="gift"></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;
- }
- .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;
- }
- .gift:hover:before{
- transform:rotate(-30deg);
- }
- .gift:hover:after{
- transform:rotate(30deg);
- }
完工!
感谢one-div提供灵感,感谢doyoe为css3在中国的普及所做的工作。
前端开发whqet制作。