CSS3-旋转齿轮_html/css_WEB-ITnose

CSS3-旋转齿轮

查看demo

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

先来认识一下css3的animation

animation的简写animation: name duration timing-function delay iteration-count direction;

**其次就是 at keyframes* *

立即学习“前端免费学习笔记（深入）”；

好了，接下来运用上述两个属性做一个可以旋转的齿轮

.img {margin: 0 auto;text-align: center;width: 400px;height: 400px;padding: 0;animation-name:myrotate;animation-duration:3s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-direction:normal;animation-play-state:running;-moz-animation-name:myrotate;-moz-animation-duration:3s;-moz-animation-timing-function:linear;-moz-animation-delay:0s;-moz-animation-iteration-count:infinite;-moz-animation-direction:normal;-moz-animation-play-state:running;-webkit-animation-name:myrotate;-webkit-animation-duration:3s;-webkit-animation-timing-function:linear;-webkit-animation-delay:0s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:normal;-webkit-animation-play-state:running;-o-animation-name:myrotate;-o-animation-duration:3s;-o-animation-timing-function:linear;-o-animation-delay:0s;-o-animation-iteration-count:infinite;-o-animation-direction:normal;-o-animation-play-state:running;}@keyframes myrotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}@-moz-keyframes myrotate {from {-moz-transform: rotate(0deg);}to {-moz-transform: rotate(360deg);}}@-webkit-keyframes myrotate {from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);}}@-o-keyframes myrotate {from {-o-transform: rotate(0deg);}to {-o-transform: rotate(360deg);}}
@@##@@

登录后复制