（转）CSS实现一个会旋转的太极图案

ゞ浴缸里的玫瑰 2022-05-09 11:36 207阅读 0赞

## 画个会旋转的太极： ##

以下部分直接赋值粘贴就好了

HTML部分：

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    </head>
    <body>
    <div class="yin-yang"></div>
    </body>
    </html>

CSS部分：

.box-taiji {width:0;height:400px;position:relative;margin:50px auto;border-left:200px solid #000;border-right:200px solid #fff;box-		shadow:0 0 30px rgba(0,0,0,.5);border-radius:400px;animation:rotation 2.5s linear infinite;-webkit-animation:rotation 2.5s linear infinite;-moz-animation:rotation 2.5s linear infinite;}
    .box-taiji:before,
    .box-taiji:after {position:absolute;content:"";display:block;}
    .box-taiji:before {width:200px;height:200px;top:0;left:-100px;z-index:1;background-color:#fff;border-radius:50%;box-shadow:0 200px 0 #000;}
    .box-taiji:after {width:60px;height:60px;top:70px;left:-30px;z-index:2;background-color:#000;border-radius:50%;box-shadow:0 200px 0 #fff;}
    
    @keyframes rotation {
    0% {transform:rotate(0deg);}
    100% {transform:rotate(-360deg);}
    }
    @-webkit-keyframes rotation {
    0% {-webkit-transform:rotate(0deg);}
    100% {-webkit-transform:rotate(-360deg);}
    }
    @-moz-keyframes rotation {
    0% {-moz-transform:rotate(0deg);}
    100% {-moz-transform:rotate(-360deg);}
    }

效果图预览：

[会旋转的太极：https://70kg111.github.io/TaiJi/index.html][https_70kg111.github.io_TaiJi_index.html]

原作者出处：

[https://www.cnblogs.com/huanlei/p/4031052.html][https_www.cnblogs.com_huanlei_p_4031052.html]

[https_70kg111.github.io_TaiJi_index.html]: https://70kg111.github.io/TaiJi/index.html
[https_www.cnblogs.com_huanlei_p_4031052.html]: https://www.cnblogs.com/huanlei/p/4031052.html