css3画一个旋转收缩的太极图
2017-11-11 本文已影响0人
留白的未来
下文是之前写的,今天在写码时突然想到,之前写这个时用了一个笨方法.只需要把外圈的边框替换成盒阴影,下述问题就都不存在了.
/* border: 1px solid #000; */
box-shadow: 0px 0px 0px 1px #000;
如此便解决了,因为box-shadow不占盒子空间,
所以无需再去计算伪元素宽度问题.
- 画法：利用伪元素；
- 计算伪元素宽度和定位时需要注意的是：伪元素默认起始位置为原元素的content-box区域；
太极图（静态效果）.png
<body>
<div></div>
</body>
div {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
box-sizing: border-box;
width: 400px; height: 400px;
margin: auto;
border: 1px solid #000;
border-bottom: 200px solid #000;
border-radius: 50%;
transform-origin: 50% 50%;
-webkit-animation: rotate 4s ease-in-out infinite alternate;
-moz-animation: rotate 4s ease-in-out infinite alternate;
-o-animation: rotate 4s ease-in-out infinite alternate;
animation: rotate 4s ease-in-out infinite alternate;
}
div::before,div::after{
position:absolute;
top:100px;
width:39px; height:40px;
content:'';
border-radius:50%;
}
div::before{
left:199px;
background:#000;
border:80px solid #fff;
}
div::after{
background:#fff;
border:80px solid #000;
}
@-webkit-keyframes rotate{
from{ -webkit-transform: rotate(0deg) scale(1);opacity: 1; }
to{ -webkit-transform: rotate(720deg) scale(0); opacity: 0;}
}
@-moz-keyframes rotate{
from{ -moz-transform: rotate(0deg) scale(1); opacity: 1;}
to{ -moz-transform: rotate(720deg) scale(0); opacity: 0;}
}
@-ms-keyframes rotate{
from{ -ms-transform: rotate(0deg) scale(1);opacity: 1; }
to{ -ms-transform: rotate(720deg) scale(0);opacity: 0; }
}
@-o-keyframes rotate{
from{ -o-transform: rotate(0deg) scale(1);opacity: 1; }
to{ -o-transform: rotate(720deg) scale(0);opacity: 0; }
}
keyframes rotate{
from{ transform: rotate(0deg) scale(1); opacity: 1;}
to{ transform: rotate(720deg) scale(0); opacity: 0;}
}
- 疑问：如何实现太极图始终沿顺时针方向旋转？
解决方案:
animation: rotate 4s infinite normal;
keyframes rotate{
0%{ transform: rotate(0deg) scale(1); }
50%{ transform: rotate(720deg) scale(0); }
100%{ transform: rotate(1440deg) scale(1); }
}
