zoukankan      html  css  js  c++  java
  • 使用CSS3动画属性实现360°无限循环旋转【代码片段】

    使用CSS3的animation动画属性实现360°无限循环旋转。

    代码片段:

    <div id="test">

      <img src="/CSS3/img/yinyue.png" id="change" />   //图片路径自定义

    </div>

    CSS样式书写如下:

    #change{ position:absolute; right:200px; -webkit-animation:change 2s linear infinite;}

    @-webkit-keyframes change

    {

      0%{-webkit-transform:rotate(0deg);}

      50%{-webkit-transform:rotate(180deg);}

      100%{-webkit-transform:rotate(360deg);}

    }

    搞定!!!当然,这里只写了chrome/Safari浏览器的兼容,其它的可再加上:

    @-moz-keyframes change{***}  火狐

    @-ms-keyframes change{***}  IE

    @keyframes change{***}   W3C

    Opera浏览器不支持animation属性!!!

  • 相关阅读:
    iota妙用
    io
    http
    gosched
    go设置使用多少个cpu
    go协程的特点
    go条件变量同步机制
    Go奇技淫巧
    U5首次登录
    Maven安装中的问题
  • 原文地址:https://www.cnblogs.com/grnBlogs/p/4652124.html
Copyright © 2011-2022 走看看