首页 > 代码库 > 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制作旋转动画
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。