CSS太极和动画

今天完成一个css太极八卦的css效果，用一个div实现css动画效果，并用before和after伪类来实现。

分析过程

首先画一个div
<div id="taiji"></div>

#taiji {
    width: 192px;
    height: 96px;
    background: #eee;
    border-color: black;
    border-style: solid;
    border-width: 0px 0px 96px 0px;
    border-radius: 100%;
    position: relative;
}

其次画出两个伪类

#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 36px solid black;
    border-radius: 100%;
    width: 24px;
    height: 24px;
}

#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: black;
    border: 36px solid #eee;
    border-radius:100%;
    width: 24px;
    height: 24px;
}

下面是效果图

css分割.png

最后将两个div合并成一个div，就可以得到完整的太极了

完整css.png

下面我们加点特效，给这个div一个shadow效果和动画效果。
这就需要box-shadow和keyframes了，box-shadow一共有四个参数，分别：水平距离，竖直距离，模糊程度和颜色，我们只需要模糊程度和颜色，所以前两个参数给0，代码是box-shadow:0 0 1.5em black;;接下来我们在给太极动画效果，代码是animation: roate 10s infinite linear; 和 @keyframes roate {0% {transform: rotateZ(0)}100% {transform: rotateZ(360deg) } }。

最后我们就完成了完整的css太极和动画。

太极和动画.png

预览效果：https://xiaozhi1.github.io/css-taiji/

参考文档

1.https://css-tricks.com/examples/ShapesOfCSS/
2.https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before
3.https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
4.https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow