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 }
View Code
效果图：
标签：动图,width,--,border,100px,height,八卦图,radius,taiji From： https://www.cnblogs.com/mxx520/p/17819651.html