最近看到一个小demo,一个<i>标签实现动态太极图,按照如下两张图片的样式,来回交替运动,感觉很是惊喜,我们工作内容都是政府类网站,平时很少能把这些css3属性结合起来使用。
body部分:
<body>
<i class="boxs"></i>
</body>
css部分:
给body添加一个灰色背景:
body{
background-color: #ccc;
}
为<i>标签设置弹性布局 display:flex, 再用css3线性渐变设置上半部分黑色,下半部分白色的背景色。
.boxs{
display: flex;
align-items: center;
width: 200px;
height: 200px;
margin: 100px auto;
background: linear-gradient(#000 50%, #fff 50%);
border-radius: 50%;
}
效果如图:
接下来用css3伪对象选择符创建内部的两个小圆形,由于<i>标签是弹性布局,并且设置了align-items:center属性,所以创建的内部元素垂直居中:
.boxs::before,
.boxs::after{
content: "";
display: block;
width: 50%;
height: 50%;
border-radius: 50%;
background: #ff0;
}
再来为内部的两个小圆改变一下颜色,用到的是css3径向渐变属性:
.boxs::before{
background: radial-gradient(#fff 25%, #000 25%);
}
.boxs::after{
background: radial-gradient(#000 25%, #fff 25%);
}
这样一个太极图就生成了,如何让他动起来呢?答案是:使用关键帧(@keyframes)和动画属性animation:
创建动画,从原始大小0.7倍变化到1.3倍:
@keyframes move1{
from{
transform: scale(0.7);
}
to{
transform: scale(1.3);
}
}
使用animation属性:由于.boxs::after需要先从大变到小,所以需要提前1秒执行。为了不让动画效果超出大圆的范围,所以两个小圆的基准点不同,一个在左( transform-origin: 0% 50%),一个在右(transform-origin: 100% 50%; )。
.boxs::before{
background:-webkit-radial-gradient(#000 25%, #fff 25%);
transform-origin: 0% 50%;
animation-name: piece;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count:infinite;
animation-direction: alternate;
}
.boxs::after{
background:-webkit-radial-gradient(#fff 25%, #000 25%);
transform-origin: 100% 50%; /*设置元素基点位置*/
animation-name: piece; /*动画名称*/
animation-duration: 1s; /*动画执行时间*/
animation-timing-function: linear; /*动画速度曲线*/
animation-delay: -1s; /*动画提前1秒执行*/
animation-iteration-count:infinite; /*动画播放次数*/
animation-direction: alternate; /*动画反向播放*/
}
这样就完成了!(为了博客精简,所以没有加上"-webkit-","-moz-","-ms-"等兼容写法,但在实际开发中,这些不可缺少)。