夏日博客

A-A+

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

2016年01月03日 前端设计 评论 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-image: url(img/cd.jpg);  
  20. background-repeat: no-repeat;  
  21. animation: 9.5s linear 0s normal none infinite rotate;  
  22. -webkit-animation:9.5s linear 0s normal none infinite rotate;  
  23. height: 300px;  
  24. width: 300px;  
  25. position: absolute;  
  26. top: 74px;  
  27. left: 73px;  
  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. 微历史 2016年01月03日 下午 5:42  -199楼  回复

    弄一演示地址嘛

给我留言