本文转载自http://www.w3cfuns.com/notes/17946/11314ff4bd9f708f3aa37a081eb1f957
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 <title>css-taiji</title>
7 <style type="text/css">
8 *{margin:0;padding:0;}
9 html{font-size: 62.5%;}
10 body{
11 font-family: "mircoft yahei";
12 font-size: 14px;
13 font-size:1.4rem;
14 line-height: 1;
15 height: 1500px;
16 }
17 .taiji
18 {
19 margin: 100px auto;
20 width: 500px;
21 height: 260px;
22 background-color: #fff;
23 border-color: #000;
24 border-style: solid;
25 border-width: 2px 2px 250px 2px;
26 border-radius: 100%;
27 position: relative;
28
29 animation: myfirst 5s ease-in-out 0s infinite ;
30 /* Firefox: */
31 -moz-animation: myfirst 5s ease-in-out 0s infinite ;
32 /* Safari 和 Chrome: */
33 -webkit-animation: myfirst 5s ease-in-out 0s infinite ;
34 /* Opera: */
35 -o-animation: myfirst 5s ease-in-out 0s infinite ;
36
37 }
38 .taiji:before{
39 position:absolute;
40 content:‘‘;
41 top:50%;
42 left:0;
43 width:50px;
44 height:50px;
45 background-color: #fff;
46 border:100px solid #000;
47 border-radius: 100%;
48 }
49 .taiji:after{
50 position:absolute;
51 content:‘‘;
52 top:50%;
53 left:50%;
54 width:50px;
55 height:50px;
56 background-color: #000;
57 border:100px solid #fff;
58 border-radius:100%;
59 }
60
61 @keyframes myfirst{
62 0% {
63 -webkit-transform: rotateZ(0deg);
64 -moz-transform: rotateZ(0deg);
65 -ms-transform: rotateZ(0deg);
66 -o-transform: rotateZ(0deg);
67 transform: rotateZ(0deg);
68 }
69 100% {
70 -webkit-transform: rotateZ(360deg);
71 -moz-transform: rotateZ(360deg);
72 -ms-transform: rotateZ(360deg);
73 -o-transform: rotateZ(360deg);
74 transform: rotateZ(360deg);
75 }
76 }
77 @-webkit-keyframes myfirst{
78 0% {
79 -webkit-transform: rotateZ(0deg);
80 -moz-transform: rotateZ(0deg);
81 -ms-transform: rotateZ(0deg);
82 -o-transform: rotateZ(0deg);
83 transform: rotateZ(0deg);
84 }
85 100% {
86 -webkit-transform: rotateZ(360deg);
87 -moz-transform: rotateZ(360deg);
88 -ms-transform: rotateZ(360deg);
89 -o-transform: rotateZ(360deg);
90 transform: rotateZ(360deg);
91 }
92 }
93 @-moz-keyframes myfirst{
94 0% {
95 -webkit-transform: rotateZ(0deg);
96 -moz-transform: rotateZ(0deg);
97 -ms-transform: rotateZ(0deg);
98 -o-transform: rotateZ(0deg);
99 transform: rotateZ(0deg);
100 }
101 100% {
102 -webkit-transform: rotateZ(360deg);
103 -moz-transform: rotateZ(360deg);
104 -ms-transform: rotateZ(360deg);
105 -o-transform: rotateZ(360deg);
106 transform: rotateZ(360deg);
107 }
108 }
109 @-ms-keyframes myfirst{
110 0% {
111 -webkit-transform: rotateZ(0deg);
112 -moz-transform: rotateZ(0deg);
113 -ms-transform: rotateZ(0deg);
114 -o-transform: rotateZ(0deg);
115 transform: rotateZ(0deg);
116 }
117 100% {
118 -webkit-transform: rotateZ(360deg);
119 -moz-transform: rotateZ(360deg);
120 -ms-transform: rotateZ(360deg);
121 -o-transform: rotateZ(360deg);
122 transform: rotateZ(360deg);
123 }
124 }
125 </style>
126 </head>
127 <body>
128 <div class="taiji"></div>
129 </body>
130 </html>
时间： 2024-10-21 02:30:48