A-A+

css3打造不间断旋转的光盘封面

2016年01月03日 web前端设计 评论 1 条 阅读 11 views 次

近日在去一些博友的博客访问的时候,发现不少的博客都有一些轻音乐,当我再次进入的时候,音乐CD会自动的播放,给人一种相对轻松的感觉,而令我最感兴趣的则是这个音乐CD是怎么做成的,以前我只看到过在酷狗等软件上面有自动不间断旋转的光盘,而又如何将这个不间断的光盘放到网上呢,给我第一眼的感觉就是 CSS 3 制作的。

然后就去各种的 GG,想要找到制作的方法,首先让我困惑的是,这个不间断旋转的光盘封面是如何放上去的,如果仅仅是一个图片,哪应该是正方形的,这个时候就要考虑有可能是 PNG 的图片,把四周给镂空了,也只有 PNG 的图片才能在网页当中不显示镂空的哪一部分,然后再结合 CSS 3 的实例代码形成。

最后的重点就是如何用 CSS3 让这个CD封面旋转起来,GG了好久,还是没能找到,只有找 wp 主题了,找到当前使用音乐播放的博客,果然在其最下面找到了这款主题的制作者,把整个主题下载下来之后,终于还是让我把实现的代码给找出来了,主要使用的就是 CSS3 中 transform:rotate(360deg) 这个参数了。

好了,夏日博客还是先把整体的代码给贴出来吧,好多代码我也不是太理解,如果感兴趣的话,可以查 CSS 3 的手册,我这里只是感兴趣,只要把这个实例效果给实现就是我的目的了。

CSS样式代码如下:

  1. @-webkit-keyframes rotate{  
  2. from{-webkit-transform:rotate(0deg)}  
  3. to{-webkit-transform:rotate(360deg)}  
  4. }  
  5. @-moz-keyframes rotate{  
  6. from{-moz-transform:rotate(0deg)}  
  7. to{-moz-transform:rotate(360deg)}  
  8. }  
  9. @-ms-keyframes rotate{  
  10. from{-ms-transform:rotate(0deg)}  
  11. to{-ms-transform:rotate(360deg)}  
  12. }  
  13. @-o-keyframes rotate{  
  14. from{-o-transform:rotate(0deg)}  
  15. to{-o-transform:rotate(360deg)}  
  16. }  
  17.   
  18. .tupain{  
  19. background-imageurl(img/cd.jpg);  
  20. background-repeatno-repeat;  
  21. animation: 9.5s linear 0s normal none infinite rotate;  
  22. -webkit-animation:9.5s linear 0s normal none infinite rotate;  
  23. height300px;  
  24. width300px;  
  25. positionabsolute;  
  26. top74px;  
  27. left73px;  
  28. z-index: 0;  
  29. }  
  30.   
  31. .zhezhao{  
  32. background:url(img/playerMask.png) no-repeat;  
  33. height:430px;  
  34. width:430px;  
  35. z-index:1;  
  36. position:absolute;  
  37. }  

HTML代码如下:

  1. <div>  
  2.     <div class="zhezhao"></div>  
  3.     <div class="tupian"></div>  
  4. </div>  

好了,完整的代码已经被我拷贝下来了,想要在自己站点实现这样一个 CSS3 不间断旋转图片效果的话,就来测试一下吧。

标签:

1 条留言  访客:1 条  博主:0 条

  1. 微历史

    弄一演示地址嘛

给我留言