#box { width:800px; height:800px; border-radius:50%; margin:0px auto; position:relative; top:100px; } .second { width:180px; height:100px; position:absolute; color:black; font-weight:bolder; text-align:center; font-size:40px; } .one { width:180px; height:20px; background:black; margin-bottom:5px; } .two { width:180px; height:20px; margin-bottom:5px; overflow:hidden; } .two:before { display:block; content:""; background:black; width:85px; height:20px; float:left; } .two:after { display:block; content:""; background:black; width:85px; height:20px; float:right; } .box-taiji { width:0; height:400px; position:absolute; left:50%; top:50%; margin-top:-200px; /* 高度的一半 */ margin-left:-200px; /* 宽度的一半 */ 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); } }
纯css+jquery实现太极八卦图,两个div实现