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

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

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


标签
css图片旋转特效

本站部分技术文章为参考网上实用内容发布,目的是记录踩坑经验,若未备注来源而侵犯了您原创文章权益,请联系博主删除;对文章有不同看法的朋友欢迎在评论区留言互动

相关文章
  • DIV半透明层 CSS来实现网页背景半透明

    DIV半透明层 CSS来实现网页背景半透明

    浏览次数:762

  • Iframe 用法的详细讲解

    Iframe 用法的详细讲解

    浏览次数:613

  • CSS实现背景透明,文字不透明,兼容所有浏览器

    CSS实现背景透明,文字不透明,兼容所有浏览器

    浏览次数:530

  • Flex 布局教程:语法篇

    Flex 布局教程:语法篇

    浏览次数:382

  • Flex 布局教程:实例篇

    Flex 布局教程:实例篇

    浏览次数:316

  • pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)

    pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)

    浏览次数:277

  • css3中的width:100vh以及calc(100vh + 10px) 视窗高度/宽度

    css3中的width:100vh以及calc(100vh + 10px) 视窗高度/宽度

    浏览次数:250

  • 如何让html的div内容溢出后显示滚动条

    如何让html的div内容溢出后显示滚动条

    浏览次数:186

网友点评
功能开发中......
0.375000s