• 欢迎浏览“String me = Creater\忠实的资深Linux玩家;”,请文明浏览,理性发言,有侵犯你的权益请邮件我(creater@vip.qq.com).
  • 把任何的失败都当作一次尝试,不要自卑;把所有的成功都想成是一种幸运,不要自傲。
  •    4年前 (2014-06-27)  web前端 |   抢沙发  23 
    文章评分 0 次,平均分 0.0

    浏览器支持情况

    Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性,Chrome 需要前缀 -webkit-。

    CSS3 动画

    使用 @-webkit-keyframes定义动画规则,一般使用%来表达变化。比如以下的代码就定义了名为x-spin的CSS3动画。

          @-webkit-keyframes x-spin {
            0%    { -webkit-transform: rotateX(0deg); }
            50%   { -webkit-transform: rotateX(180deg); }
            100%  { -webkit-transform: rotateX(360deg); }
          }

    在定义好动画后,需要将动画绑定到选择器,并且定义动画的持续时间,如下的代码将x-spin动画绑定到了类rotate上,并且定义了动画的持续时间为7秒,动画播放次数无限,动画播放速度均匀。

          #rotate {
            margin: 0 auto;
            width: 600px;
            height: 400px;
            -webkit-transform-style: preserve-3d;
            -webkit-animation-name: x-spin;
            -webkit-animation-duration: 7s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
          }

    js动态生成子div

    通过js代码来旋转生成的每个div,并附加到ring上。

     

    除特别注明外,本站所有文章均为String me = "Creater\忠实的资深Linux玩家";原创,转载请注明出处来自http://unix8.net/home.php/3607.html

    关于

    发表评论

    暂无评论

    切换注册

    登录

    忘记密码 ?

    切换登录

    注册

    扫一扫二维码分享