css3怎么实现图片旋转动画效果

　　介绍

小编给大家分享一下css3怎么实现图片旋转动画效果,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!

实现css3中图片的旋转可以使用可以使用-webkit-animation和@-webkit-keyframes组合使用来完成。

<强> -webkit-animation是一个复合属性,定义如下:

-webkit-animation:名字时间定时功能延迟iteration_count方向;

名称:是@-webkit-keyframes中需要指定的方法,用来执行动画。

时间:动画一个周期执行的时长。

定时功能:动画执行的效果,可以是线性的,也可以是“快速进入慢速出来,等。

延迟:动画延时执行的时长。

iteration_count:动画循环执行次数,如果是无限的,则无限执行。

方向:动画执行方向。

<强> @-webkit-keyframes中从和的两个属性,就是指定动画执行的初始值和结束值。

<强> -webkit-animation-play-state:暂停;暂停动画的执行。

在了解了css3实现图片旋转所用到的属性值后,我们来直接看css3实现图片旋转动画的代码:

& lt; !DOCTYPE HTML公众“-//W3C//DTD HTML 4.01过渡//EN"“http://www.w3.org/TR/html4/loose.dtd"比; 　　& lt; html> 　　& lt; head> 　　& lt; title> transform 　　& lt; style> 　　#装载机{ 　　显示:块; 　　位置:相对; 　　-webkit-animation:旋转2 s线性无限; 　　动画:旋转2 s线性无限; 　　} 　　@-webkit-keyframes旋转{ 　　0% { 　　-webkit-transform:旋转(0度); 　　-ms-transform:旋转(0度); 　　变换:旋转(0度); 　　} 　　100% { 　　-webkit-transform:旋转(360度); 　　-ms-transform:旋转(360度); 　　变换:旋转(360度); 　　} 　　} 　　@keyframes旋转{ 　　0% { 　　-webkit-transform:旋转(0度); 　　-ms-transform:旋转(0度); 　　变换:旋转(0度); 　　} 　　100% { 　　-webkit-transform:旋转(360度); 　　-ms-transform:旋转(360度); 　　变换:旋转(360度); 　　} 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div id=皌est"比; 　　https://www.yisu.com/zixun/& lt; img src=" http://img4.imgtn.bdimg.com/it/u=3413495237, 2076545415调频=26 gp=0. jpg”风格=翱矶?250 px;高度:250 px”id="机"/>