css3画一个旋转收缩的太极图

下文是之前写的,今天在写码时突然想到,之前写这个时用了一个笨方法.只需要把外圈的边框替换成盒阴影,下述问题就都不存在了.

/* border: 1px solid #000; */
box-shadow: 0px 0px 0px 1px #000;

如此便解决了,因为box-shadow不占盒子空间,
所以无需再去计算伪元素宽度问题.

---

• 画法：利用伪元素；
• 计算伪元素宽度和定位时需要注意的是：伪元素默认起始位置为原元素的content-box区域；

---

太极图（静态效果）.png

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); }
}