css3旋转动画

使用transform:rotate属性来实现旋转效果。

使用animation-play-state来实现鼠标移动到图片上自动停止。移动后恢复旋转动画。

使用infinite来实现无限循环播放的原理

使用@keyframes run来实现旋转之间的动画效果

.seser{
    display:block;
    width:200px;
    height:200px;
    margin:120px auto;
    /*旋转角度：30*/
    transform:rotate(30deg);
    /*全局属性*/
    animation:run 15s linear infinite;
}
.seser img{
    width:300px;
    height:300px;
    border:1px solid #F00;
}
.seser:hover{
    /*鼠标移动到图片上暂停运动*/
    animation-play-state:paused;
}
/*css3属性*/
@keyframes run{
    /*旋转0度*/
    from{
        transform:rotate(0deg);
    }
    /*旋转360度*/
    to{
        transform:rotate(360deg);
    }
    
}

 

转载于:https://www.cnblogs.com/luohaiwenhtml/p/8423977.html