前端

画一个太极 - CSS3动画

看一下最终效果
演示.gif

本文我们用一个div来实现这个旋转的太极图

先分析一下,太极图应该有哪些部分

因为只用到一个div,那么肯定少不了::after和::before这两兄弟了

也就是这个太极图由三部分构成,知道了这一点我们在看图

我们可以把两个蝌蚪的头看成同心圆,拿掉后同心圆,下面应该是一个一边黑色一边白色的圆形,如图
QQ截图20190611215732.png
QQ截图20190611215800.png

这样,就可以组装成一个太极了,让我们一步步实现

先画一个基本的圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    body {
        background-color: #abcdef;
    }
    #taiji {
        width: 0px;
        height: 0px;
        border: 150px white solid;
        border-radius: 100%;
    }
</style>

<body>
    <div id="taiji"></div>
</body>

</html>

这样,一个白底的圆形就画好了,要实现左黑右白,我们可以单独设置边框

border-left: 150px solid black;
border-right: 150px solid white;

但这样,页面上是什么都不会显示的,因为边框虽然添加了宽度,但高度仍然是零,我们只需要把高度设置为300px就可以了

    #taiji {
        width: 0px;
        height: 300px;
        border-left: 150px solid black;
        border-right: 150px solid white;
        border-radius: 100%;
        margin: 100px auto;
    }

然后就是同心圆,我们使用伪元素画圆,margin调整位置即可

    #taiji::before {
        content: '';
        display: block;
        width: 50px;
        height: 50px;
        border: 50px solid black;
        border-radius: 100%;
        background-color: white;
        margin-left: -75px;
    }
    #taiji::after {
        content: '';
        display: block;
        width: 50px;
        height: 50px;
        border: 50px solid white;
        border-radius: 100%;
        background-color: black;
        margin-left: -75px;
    }

最后,用CSS3动画让div旋转

    #taiji {
        width: 0px;
        height: 300px;
        border-left: 150px solid black;
        border-right: 150px solid white;
        border-radius: 100%;
        animation: taiji 4s linear 0s infinite;
        margin: 100px auto;
    }
    @keyframes taiji{  
        from{  
            transform:rotate(0deg);  
        }  
        to{  
            transform:rotate(360deg);  
        }  
  }  

这样,一个太极图就完成了

附件太极.zip

微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

支付宝扫一扫,向我赞赏

回复

This is just a placeholder img.