HTML:
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"/> 4 <title>demo01-taiji</title> 5 <link type="text/css" href="E:\htmltest1\demo1\demo01.css" rel="stylesheet"> 6 </head> 7 <body> 8 <div class="taiji"> 9 <div class="taiji_da"></div> 10 <div class="taiji_ban"></div> 11 <div class="taiji_xiao1"></div> 12 <div class="taiji_xiao2"></div> 13 <div class="taiji_xiao11"></div> 14 <div class="taiji_xiao22"></div> 15 </div> 16 17 </body>
CSS:
1 *{margin:0; padding:0;} 2 3 @keyframes move{ 4 0% {transform:rotate(0deg);} 5 100% {transform:rotate(360deg);} 6 } 7 .taiji{ 8 width:200px; 9 height:200px; 10 margin:100px auto; 11 position:relative; 12 animation:move 1s infinite linear; 13 } 14 15 .taiji_da{ 16 width:200px; 17 height:200px; 18 border-radius:50%; 19 background-color:#000; 20 } 21 .taiji_ban{ 22 width:100px; 23 height:200px; 24 background-color:white; 25 border-top-right-radius:150px; 26 border-bottom-right-radius:150px; 27 position:absolute; 28 top:0; 29 left:100px; 30 } 31 .taiji_xiao1{ 32 width:100px; 33 height:100px; 34 background-color:black; 35 border-radius:50%; 36 position:absolute; 37 top:0; 38 left:50px; 39 } 40 .taiji_xiao2{ 41 width:100px; 42 height:100px; 43 background-color:white; 44 border-radius:50%; 45 position:absolute; 46 top:100px; 47 left:50px; 48 49 } 50 .taiji_xiao11{ 51 width:50px; 52 height:50px; 53 background-color:white; 54 border-radius:50%; 55 position:absolute; 56 top:25px; 57 left:75px; 58 } 59 .taiji_xiao22{ 60 width:50px; 61 height:50px; 62 background-color:black; 63 border-radius:50%; 64 position:absolute; 65 top:125px; 66 left:75px; 67 }
效果图：
