利用CSS3动画绘制旋转环(使用chrome浏览器,不支持IE)

2014年6月27日 由 Creater 留言 »

浏览器支持情况

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上。

广告位

发表评论

你必须 登陆 方可发表评论.