首页 > 代码库 > css3制作旋转动画

css3制作旋转动画

上代码:

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head lang="en">
  5         <meta charset="UTF-8">
  6         <title></title>
  7 
  8         <style>
  9             .out_circle {
 10                 width: 440px;
 11                 height: 440px;
 12                 border: 1px solid;
 13                 border-radius: 50%;
 14                 margin: 30px auto 0 auto;
 15                 position: relative;
 16             }
 17             
 18             .nav_circle {
 19                 width: 110px;
 20                 height: 440px;
 21                 float: left;
 22                 position: absolute;
 23                 top: 0;
 24                 left: 169px;
 25                 text-align: center;
 26             }
 27             
 28             .img_top {
 29                 top: -27px;
 30                 -webkit-transform: rotate(0deg);
 31             }
 32             
 33             .img_bottom {
 34                 top: 316px;
 35                 -webkit-transform: rotate(0deg);
 36             }
 37             
 38             .img_top img,
 39             .img_bottom img {
 40                 width: 77px;
 41                 height: 77px;
 42             }
 43             
 44             .img_top,
 45             .img_bottom {
 46                 position: relative;
 47                 z-index: 1;
 48             }
 49             
 50             .nav_circle .img a {
 51                 position: absolute;
 52                 top: 10px;
 53                 left: 94px;
 54                 width: 52px;
 55             }
 56             
 57             .r1 {
 58                 transform: rotate(0deg) skew(0deg) scale(1);
 59                 -ms-transform: rotate(0deg) skew(0deg) scale(1);
 60                 /* IE 9 */
 61                 -moz-transform: rotate(0deg) skew(0deg) scale(1);
 62                 /* Firefox */
 63                 -webkit-transform: rotate(0deg) skew(0deg) scale(1);
 64                 /* Safari oí Chrome */
 65                 -o-transform: rotate(0deg) skew(0deg) scale(1);
 66                 animation: rotate 10s linear infinite;
 67                 -webkit-animation: rotate 10s linear infinite;
 68                 -moz-animation: rotate 10s linear infinite;
 69                 -o-animation: rotate 10s linear infinite;
 70             }
 71             
 72             .r1 .img {
 73                 transform: rotate(0deg) skew(0deg) scale(1);
 74                 -ms-transform: rotate(0deg) skew(0deg) scale(1);
 75                 /* IE 9 */
 76                 -moz-transform: rotate(0deg) skew(0deg) scale(1);
 77                 /* Firefox */
 78                 -webkit-transform: rotate(0deg) skew(0deg) scale(1);
 79                 /* Safari oí Chrome */
 80                 -o-transform: rotate(0deg) skew(0deg) scale(1);
 81                 animation: rotate_c1 10s linear infinite;
 82                 -webkit-animation: rotate_c1 10s linear infinite;
 83             }
 84             
 85             .r2 {
 86                 transform: rotate(45deg) skew(0deg) scale(1);
 87                 -ms-transform: rotate(45deg) skew(0deg) scale(1);
 88                 /* IE 9 */
 89                 -moz-transform: rotate(45deg) skew(0deg) scale(1);
 90                 /* Firefox */
 91                 -webkit-transform: rotate(45deg) skew(0deg) scale(1);
 92                 /* Safari oí Chrome */
 93                 -o-transform: rotate(45deg) skew(0deg) scale(1);
 94                 animation: rotatef 10s linear infinite;
 95                 -webkit-animation: rotatef 10s linear infinite;
 96                 -moz-animation: rotatef 10s linear infinite;
 97                 -o-animation: rotatef 10s linear infinite;
 98             }
 99             
100             .r2 .img {
101                 transform: rotate(-45deg) skew(0deg) scale(1);
102                 -ms-transform: rotate(-45deg) skew(0deg) scale(1);
103                 /* IE 9 */
104                 -moz-transform: rotate(-45deg) skew(0deg) scale(1);
105                 /* Firefox */
106                 -webkit-transform: rotate(-45deg) skew(0deg) scale(1);
107                 /* Safari oí Chrome */
108                 -o-transform: rotate(-45deg) skew(0deg) scale(1);
109                 animation: rotate_c2 10s linear infinite;
110                 -webkit-animation: rotate_c2 10s linear infinite;
111             }
112             
113             .r3 {
114                 transform: rotate(90deg) skew(0deg) scale(1);
115                 -ms-transform: rotate(90deg) skew(0deg) scale(1);
116                 /* IE 9 */
117                 -moz-transform: rotate(90deg) skew(0deg) scale(1);
118                 /* Firefox */
119                 -webkit-transform: rotate(90deg) skew(0deg) scale(1);
120                 /* Safari oí Chrome */
121                 -o-transform: rotate(90deg) skew(0deg) scale(1);
122                 animation: rotates 10s linear infinite;
123                 -webkit-animation: rotates 10s linear infinite;
124                 -moz-animation: rotates 10s linear infinite;
125                 -o-animation: rotates 10s linear infinite;
126             }
127             
128             .r3 .img {
129                 transform: rotate(-90deg) skew(0deg) scale(1);
130                 -ms-transform: rotate(-90deg) skew(0deg) scale(1);
131                 /* IE 9 */
132                 -moz-transform: rotate(-90deg) skew(0deg) scale(1);
133                 /* Firefox */
134                 -webkit-transform: rotate(-90deg) skew(0deg) scale(1);
135                 /* Safari oí Chrome */
136                 -o-transform: rotate(-90deg) skew(0deg) scale(1);
137                 animation: rotate_c3 10s linear infinite;
138                 -webkit-animation: rotate_c3 10s linear infinite;
139             }
140             
141             .r4 {
142                 transform: rotate(135deg) skew(0deg) scale(1);
143                 -ms-transform: rotate(135deg) skew(0deg) scale(1);
144                 /* IE 9 */
145                 -moz-transform: rotate(135deg) skew(0deg) scale(1);
146                 /* Firefox */
147                 -webkit-transform: rotate(135deg) skew(0deg) scale(1);
148                 /* Safari oí Chrome */
149                 -o-transform: rotate(135deg) skew(0deg) scale(1);
150                 animation: rotatet 20s linear infinite;
151                 -webkit-animation: rotatet 10s linear infinite;
152                 -moz-animation: rotatet 10s linear infinite;
153                 -o-animation: rotatet 10s linear infinite;
154             }
155             
156             .r4 .img {
157                 transform: rotate(-135deg) skew(0deg) scale(1);
158                 -ms-transform: rotate(-135deg) skew(0deg) scale(1);
159                 /* IE 9 */
160                 -moz-transform: rotate(-135deg) skew(0deg) scale(1);
161                 /* Firefox */
162                 -webkit-transform: rotate(-135deg) skew(0deg) scale(1);
163                 /* Safari oí Chrome */
164                 -o-transform: rotate(-135deg) skew(0deg) scale(1);
165                 animation: rotate_c4 10s linear infinite;
166                 -webkit-animation: rotate_c4 10s linear infinite;
167             }
168             
169             @keyframes rotate {
170                 0% {
171                     transform: rotate(0deg) skew(0deg) scale(1);
172                     -ms-transform: rotate(0deg) skew(0deg) scale(1);
173                     /* IE 9 */
174                     -moz-transform: rotate(0deg) skew(0deg) scale(1);
175                     /* Firefox */
176                     -webkit-transform: rotate(0deg) skew(0deg) scale(1);
177                     /* Safari oí Chrome */
178                     -o-transform: rotate(0deg) skew(0deg) scale(1);
179                 }
180                 100% {
181                     transform: rotate(360deg) skew(0deg) scale(1);
182                     -ms-transform: rotate(360deg) skew(0deg) scale(1);
183                     /* IE 9 */
184                     -moz-transform: rotate(360deg) skew(0deg) scale(1);
185                     /* Firefox */
186                     -webkit-transform: rotate(360deg) skew(0deg) scale(1);
187                     /* Safari oí Chrome */
188                     -o-transform: rotate(360deg) skew(0deg) scale(1);
189                 }
190             }
191             
192             @keyframes rotatef {
193                 0% {
194                     transform: rotate(45deg) skew(0deg) scale(1);
195                     -ms-transform: rotate(45deg) skew(0deg) scale(1);
196                     /* IE 9 */
197                     -moz-transform: rotate(45deg) skew(0deg) scale(1);
198                     /* Firefox */
199                     -webkit-transform: rotate(45deg) skew(0deg) scale(1);
200                     /* Safari oí Chrome */
201                     -o-transform: rotate(45deg) skew(0deg) scale(1);
202                 }
203                 100% {
204                     transform: rotate(405deg) skew(0deg) scale(1);
205                     -ms-transform: rotate(405deg) skew(0deg) scale(1);
206                     /* IE 9 */
207                     -moz-transform: rotate(405deg) skew(0deg) scale(1);
208                     /* Firefox */
209                     -webkit-transform: rotate(405deg) skew(0deg) scale(1);
210                     /* Safari oí Chrome */
211                     -o-transform: rotate(405deg) skew(0deg) scale(1);
212                 }
213             }
214             
215             @keyframes rotates {
216                 0% {
217                     transform: rotate(90deg) skew(0deg) scale(1);
218                     -ms-transform: rotate(90deg) skew(0deg) scale(1);
219                     /* IE 9 */
220                     -moz-transform: rotate(90deg) skew(0deg) scale(1);
221                     /* Firefox */
222                     -webkit-transform: rotate(90deg) skew(0deg) scale(1);
223                     /* Safari oí Chrome */
224                     -o-transform: rotate(90deg) skew(0deg) scale(1);
225                 }
226                 100% {
227                     transform: rotate(450deg) skew(0deg) scale(1);
228                     -ms-transform: rotate(450deg) skew(0deg) scale(1);
229                     /* IE 9 */
230                     -moz-transform: rotate(450deg) skew(0deg) scale(1);
231                     /* Firefox */
232                     -webkit-transform: rotate(450deg) skew(0deg) scale(1);
233                     /* Safari oí Chrome */
234                     -o-transform: rotate(450deg) skew(0deg) scale(1);
235                 }
236             }
237             
238             @keyframes rotatet {
239                 0% {
240                     transform: rotate(135deg) skew(0deg) scale(1);
241                     -ms-transform: rotate(135deg) skew(0deg) scale(1);
242                     /* IE 9 */
243                     -moz-transform: rotate(135deg) skew(0deg) scale(1);
244                     /* Firefox */
245                     -webkit-transform: rotate(135deg) skew(0deg) scale(1);
246                     /* Safari oí Chrome */
247                     -o-transform: rotate(135deg) skew(0deg) scale(1);
248                 }
249                 100% {
250                     transform: rotate(495deg) skew(0deg) scale(1);
251                     -ms-transform: rotate(495deg) skew(0deg) scale(1);
252                     /* IE 9 */
253                     -moz-transform: rotate(495deg) skew(0deg) scale(1);
254                     /* Firefox */
255                     -webkit-transform: rotate(495deg) skew(0deg) scale(1);
256                     /* Safari oí Chrome */
257                     -o-transform: rotate(495deg) skew(0deg) scale(1);
258                 }
259             }
260             
261             @keyframes rotate_c1 {
262                 0% {
263                     transform: rotate(0deg) skew(0deg) scale(1);
264                     -ms-transform: rotate(0deg) skew(0deg) scale(1);
265                     /* IE 9 */
266                     -moz-transform: rotate(0deg) skew(0deg) scale(1);
267                     /* Firefox */
268                     -webkit-transform: rotate(0deg) skew(0deg) scale(1);
269                     /* Safari oí Chrome */
270                     -o-transform: rotate(0deg) skew(0deg) scale(1);
271                 }
272                 100% {
273                     transform: rotate(-360deg) skew(0deg) scale(1);
274                     -ms-transform: rotate(-360deg) skew(0deg) scale(1);
275                     /* IE 9 */
276                     -moz-transform: rotate(-360deg) skew(0deg) scale(1);
277                     /* Firefox */
278                     -webkit-transform: rotate(-360deg) skew(0deg) scale(1);
279                     /* Safari oí Chrome */
280                     -o-transform: rotate(-360deg) skew(0deg) scale(1);
281                 }
282             }
283             
284             @keyframes rotate_c2 {
285                 0% {
286                     transform: rotate(-45deg) skew(0deg) scale(1);
287                     -ms-transform: rotate(-45deg) skew(0deg) scale(1);
288                     /* IE 9 */
289                     -moz-transform: rotate(-45deg) skew(0deg) scale(1);
290                     /* Firefox */
291                     -webkit-transform: rotate(-45deg) skew(0deg) scale(1);
292                     /* Safari oí Chrome */
293                     -o-transform: rotate(-45deg) skew(0deg) scale(1);
294                 }
295                 100% {
296                     transform: rotate(-405deg) skew(0deg) scale(1);
297                     -ms-transform: rotate(-405deg) skew(0deg) scale(1);
298                     /* IE 9 */
299                     -moz-transform: rotate(-405deg) skew(0deg) scale(1);
300                     /* Firefox */
301                     -webkit-transform: rotate(-405deg) skew(0deg) scale(1);
302                     /* Safari oí Chrome */
303                     -o-transform: rotate(-405deg) skew(0deg) scale(1);
304                 }
305             }
306             
307             @keyframes rotate_c3 {
308                 0% {
309                     transform: rotate(-90deg) skew(0deg) scale(1);
310                     -ms-transform: rotate(-90deg) skew(0deg) scale(1);
311                     /* IE 9 */
312                     -moz-transform: rotate(-90deg) skew(0deg) scale(1);
313                     /* Firefox */
314                     -webkit-transform: rotate(-90deg) skew(0deg) scale(1);
315                     /* Safari oí Chrome */
316                     -o-transform: rotate(-90deg) skew(0deg) scale(1);
317                 }
318                 100% {
319                     transform: rotate(-450deg) skew(0deg) scale(1);
320                     -ms-transform: rotate(-450deg) skew(0deg) scale(1);
321                     /* IE 9 */
322                     -moz-transform: rotate(-450deg) skew(0deg) scale(1);
323                     /* Firefox */
324                     -webkit-transform: rotate(-450deg) skew(0deg) scale(1);
325                     /* Safari oí Chrome */
326                     -o-transform: rotate(-450deg) skew(0deg) scale(1);
327                 }
328             }
329             
330             @keyframes rotate_c4 {
331                 0% {
332                     transform: rotate(-135deg) skew(0deg) scale(1);
333                     -ms-transform: rotate(-135deg) skew(0deg) scale(1);
334                     /* IE 9 */
335                     -moz-transform: rotate(-135deg) skew(0deg) scale(1);
336                     /* Firefox */
337                     -webkit-transform: rotate(-135deg) skew(0deg) scale(1);
338                     /* Safari oí Chrome */
339                     -o-transform: rotate(-135deg) skew(0deg) scale(1);
340                 }
341                 100% {
342                     transform: rotate(-495deg) skew(0deg) scale(1);
343                     -ms-transform: rotate(-495deg) skew(0deg) scale(1);
344                     /* IE 9 */
345                     -moz-transform: rotate(-495deg) skew(0deg) scale(1);
346                     /* Firefox */
347                     -webkit-transform: rotate(-495deg) skew(0deg) scale(1);
348                     /* Safari oí Chrome */
349                     -o-transform: rotate(-495deg) skew(0deg) scale(1);
350                 }
351             }
352         </style>
353     </head>
354 
355     <body>
356         <div class="out_circle">
357             <div class="slide"></div>
358             <div class="nav_circle r1">
359                 <div class="img_top img">
360                     <img src="img/01.jpg">
361                     <a href="#">产品中心</a>
362                 </div>
363                 <div class="img_bottom img">
364                     <img src="img/02.jpg">
365                     <a href="#">官方网站</a>
366                 </div>
367             </div>
368             <div class="nav_circle r2">
369                 <div class="img_top img">
370                     <img src="img/03.jpg">
371                     <a href="#">代理查询</a>
372                 </div>
373                 <div class="img_bottom img">
374                     <img src="img/04.jpg">
375                     <a href="#">后台登录</a>
376                 </div>
377             </div>
378             <div class="nav_circle r3">
379                 <div class="img_top img">
380                     <img src="img/05.jpg">
381                     <a href="#">公司资质</a>
382                 </div>
383                 <div class="img_bottom img">
384                     <img src="img/06.jpg">
385                     <a href="#">质检报告</a>
386                 </div>
387             </div>
388             <div class="nav_circle r4">
389                 <div class="img_top img">
390                     <img src="img/07.jpg">
391                     <a href="#">代理登录</a>
392                 </div>
393                 <div class="img_bottom img">
394                     <img src="img/01.jpg">
395                     <a href="#">代理授权</a>
396                 </div>
397             </div>
398         </div>
399 
400     </body>
401 
402 </html>

效果:技术分享

 

css3制作旋转动画