图片旋转特效纯HTML5+CSS3制作图片旋转

HTML+CSS

图片旋转特效纯HTML5+CSS3制作图片旋转

字号+ 作者：micloud 来源：www.seoalphas.com 2018-07-13 18:38 浏览量：2302

transform的四个属性：

　　①旋转--->rotate(参数a)，单位deg，表示旋转角度，正数顺时针，负数逆时针。

　　②缩放--->scale(参数a)，单位1，也就是“没有单位”，赤裸裸的0-1之间的数字就行，表示为缩放比例。

　　③倾斜--->skew(参数a,参数b)，单位deg，两个参数分别表示x,y方向上的倾斜角度，正数顺时针，负数逆时针。

　　④移动--->translate(参数a)，单位px，移动方向是在div这个平面方向上(这样说起来，应该有点难理解，放在四维坐标中，把div看做是任意一个平面来理解)，也有正数之分，正向前，负向后。

示例图

示例代码：

    <!DOCTYPE html>     
    <html>     
    <head>     
        <meta charset="UTF-8">     
        <title>Document</title>     
        <style type="text/css">     
            #liu{     
                width:280px;     
                height: 279px;     
                background: url(shishi.png) no-repeat;     
                border-radius:140px;     
                -webkit-animation:run 6s linear 0s infinite;     
            }     
         
            #liu:hover{     
                -webkit-animation-play-state:paused;     
            }     
         
         
            @-webkit-keyframes run{     
                from{     
                    -webkit-transform:rotate(0deg);     
                }     
                to{     
                    -webkit-transform:rotate(360deg);     
                }     
            }     
         
        </style>     
    </head>     
    <body>     
        <div id="liu"></div>     
    </body>     
    </html>

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; 暂停动画的执行。