A-A+
css3打造不间断旋转的光盘封面
近日在去一些博友的博客访问的时候，发现不少的博客都有一些轻音乐，当我再次进入的时候，音乐CD会自动的播放，给人一种相对轻松的感觉，而令我最感兴趣的则是这个音乐CD是怎么做成的，以前我只看到过在酷狗等软件上面有自动不间断旋转的光盘，而又如何将这个不间断的光盘放到网上呢，给我第一眼的感觉就是 CSS 3 制作的。
然后就去各种的 GG，想要找到制作的方法，首先让我困惑的是，这个不间断旋转的光盘封面是如何放上去的，如果仅仅是一个图片，哪应该是正方形的，这个时候就要考虑有可能是 PNG 的图片，把四周给镂空了，也只有 PNG 的图片才能在网页当中不显示镂空的哪一部分，然后再结合 CSS 3 的实例代码形成。
最后的重点就是如何用 CSS3 让这个CD封面旋转起来，GG了好久，还是没能找到，只有找 wp 主题了，找到当前使用音乐播放的博客，果然在其最下面找到了这款主题的制作者，把整个主题下载下来之后，终于还是让我把实现的代码给找出来了，主要使用的就是 CSS3 中 transform:rotate(360deg) 这个参数了。
好了，小虎博客还是先把整体的代码给贴出来吧，好多代码我也不是太理解，如果感兴趣的话，可以查 CSS 3 的手册，我这里只是感兴趣，只要把这个实例效果给实现就是我的目的了。
CSS样式代码如下:
- @-webkit-keyframes rotate{
- from{-webkit-transform:rotate(0deg)}
- to{-webkit-transform:rotate(360deg)}
- }
- @-moz-keyframes rotate{
- from{-moz-transform:rotate(0deg)}
- to{-moz-transform:rotate(360deg)}
- }
- @-ms-keyframes rotate{
- from{-ms-transform:rotate(0deg)}
- to{-ms-transform:rotate(360deg)}
- }
- @-o-keyframes rotate{
- from{-o-transform:rotate(0deg)}
- to{-o-transform:rotate(360deg)}
- }
- .tupain{
- background-image: url(img/cd.jpg);
- background-repeat: no-repeat;
- animation: 9.5s linear 0s normal none infinite rotate;
- -webkit-animation:9.5s linear 0s normal none infinite rotate;
- height: 300px;
- width: 300px;
- position: absolute;
- top: 74px;
- left: 73px;
- z-index: 0;
- }
- .zhezhao{
- background:url(img/playerMask.png) no-repeat;
- height:430px;
- width:430px;
- z-index:1;
- position:absolute;
- }
HTML代码如下:
- <div>
- <div class="zhezhao"></div>
- <div class="tupian"></div>
- </div>
好了，完整的代码已经被我拷贝下来了，想要在自己站点实现这样一个 CSS3 不间断旋转图片效果的话，就来测试一下吧。