（轉）CSS實現一個會旋轉的太極圖案
阿新 • • 發佈：2018-12-13
畫個會旋轉的太極：
以下部分直接賦值貼上就好了
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);} }
效果圖預覽：
原作者出處：