码迷,mamicode.com
首页 > 其他好文 > 详细

类似百度音乐唱片播放时CD图片不停旋转的实现

时间:2015-11-13 13:05:32      阅读:299      评论:0      收藏:0      [点我收藏+]

标签:

类似百度音乐唱片播放时CD图片不停旋转的实现
技术分享效果图
html代码
  1. <img src="img/logo.png" class="img-responsive" style="float: left;" />
css3代码
  1. # img{
  2. -webkit-transition: -webkit-transform 5s;
  3. -webkit-transform: rotate(0deg);
  4. -moz-transform: rotate(0deg);
  5. -webkit-transform-origin: center;
  6. -moz-transform-origin: bottom center;
  7. -webkit-animation: css_a 5s;
  8. animation: css_a 5s;
  9. -moz-animation: css_a 5s;
  10. -webkit-animation-duration: 10s;
  11. -webkit-animation-timing-function: linear;
  12. /*
  13. * 不停的动
  14. */
  15. -webkit-animation-iteration-count: infinite;
  16. /* Safari and Chrome */
  17. -moz-animation-timing-function: linear;
  18. /*
  19. * 不停的动
  20. */
  21. -moz-animation-iteration-count: infinite;
  22. }
  23. @-webkit-keyframes css_a {from { /*chrome */

        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -moz-transform: rotate(0deg);
        /* Firefox */
    }
    to {
        
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        /* IE 9 */
        -moz-transform: rotate(360deg);
        /* Firefox */
    }
    }
    @-moz-keyframes css_a {from {  /*火狐 */
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -moz-transform: rotate(0deg);
        /* Firefox */
    }
    to {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        /* IE 9 */
        -moz-transform: rotate(360deg);
        /* Firefox */
    }
    }





类似百度音乐唱片播放时CD图片不停旋转的实现

标签:

原文地址:http://www.cnblogs.com/wenqd/p/6c91f9c5e7774d48c1779b423bf1c827.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!