HTML+CSS

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

字号+ 作者:alpha 来源:www.seoalphas.com 2018-07-13 18:38 我要评论(123)

transform的四个属性   ①旋转--->rotate(参数a),单位deg,表示旋转角度,正数顺时针,负数逆时针。   ②缩

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


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
评论区域