纯HTML5+CSS3制作图⽚旋转
此实例可以应⽤到许多项⽬中，很实⽤，希望⼤家可以掌握。
效果图如下：
这个效果实现起来其实并不困难，代码清单如下:
XML/HTML Code复制内容到剪贴板
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.    <meta charset="UTF-8">
5.    <title>Document</title>
6.    <style type="text/css">
7.        #liu{
8.            width:280px;
9.            height: 279px;
10.            background: url(shishi.png) no-repeat;
11.            border-radius:140px;
12.            -webkit-animation:run 6s linear 0s infinite;
13.        }
14.
15.        #liu:hover{
16.            -webkit-animation-play-state:paused;
17.        }
html图片展示特效
18.
19.
20.        @-webkit-keyframes run{
21.            from{
22.                -webkit-transform:rotate(0deg);
23.            }
24.            to{
25.                -webkit-transform:rotate(360deg);
26.            }
27.        }
28.
29.    </style>
30. </head>
31. <body>
32.    <div id="liu"></div>
33. </body>
34. </html>
35.
1. id为liu的div就是⽤来展⽰图⽚的区域，只不过这⾥的图⽚是使⽤的背景图⽚，并且通过设置圆⾓来达到圆形的效果。
2. 代码中关键的部分是怎样使得图⽚⽆限转动。我们可以使⽤ -webkit-animation 和 @-webkit-keyframes 组合使⽤来完成。-webkit-animation 是⼀个复合属性，定义如下：
-webkit-animation: name duration timing-function delay iteration_count direction;
name: 是 @-webkit-keyframes 中需要指定的⽅法，⽤来执⾏动画。
duration: 动画⼀个周期执⾏的时长。
timing-function: 动画执⾏的效果，可以是线性的，也可以是"快速进⼊慢速出来"等。
delay: 动画延时执⾏的时长。
iteration_count: 动画循环执⾏次数，如果是infinite，则⽆限执⾏。
direction: 动画执⾏⽅向。
3. @-webkit-keyframes 中的from和to 两个属性，就是指定动画执⾏的初始值和结束值。
4. -webkit-animation-play-state:paused; 暂停动画的执⾏。
以上就是本⽂的全部内容，希望对⼤家实现图⽚旋转特效有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。