CSS3-旋转齿轮

CSS3-旋转齿轮

查看DEMO

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

先来认识一下css3的animation

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

其次就是@keyframes

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

<style>
    .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);}
    }
</style>

<div class="img">
    <img src="chilun.png" alt="">
</div>

转载于:https://www.cnblogs.com/zhongshanblog/p/4696237.html