最初看到這個效果是在一個音樂站，http://jing.fm，這個網站的界面做得非常不錯，音樂也很有風格。當我第一次進入這個網站時最感興趣的還是中間那個不斷旋轉的光盤封面，就想知道它是如何運作的，以及如何能把它也放在我的網站首頁上面以增加效果，具體的效果可以去jing.fm看下，用新浪微博賬號即可登錄。
我提取的效果僅僅包含了使其旋轉的部分代碼，並沒有包括中間的暫停按鈕，可以到這里去查看演示以及源代碼。
演示中用的圖片及CSS代碼全部從jing.fm提取，我只是對它做了一些簡化。再者由於本人剛接觸網頁不太久，很多東西還不能得到深刻的認識，目前就先分享一些簡單的內容。
會CSS的人從源碼都能看懂它的工作方式，我只解釋一些我自己學習過程中有疑惑的地方，如果有不懂的可以留言。
一、原本是一個矩形的光盤封面如何被嵌入到一個圓形的區域中
這是我剛開始最小知道的問題，怎樣能用CSS把圖形嵌入到一個形狀中，后來研究圖片發現它是把一個中間鏤空的PNG圖形放在了最上面，把封面放在下面一層，使用position:absolute進行定位，使CD封面處於鏤空的中間位置，這樣看起來就好像是把封面嵌入到了背景里面。
二、如何使背景圖形位於CD封面的上方
看圖片發現所謂的背景圖形只是其中一部分，使用z-index把它的層次調高，讓CD封面的層次靠下，這樣背景圖形就位於CD封面上面了。
三、如何讓CD封面不斷自動旋轉
這個是重點。研究CSS3的時候發現有一個transform效果可以使圖形旋轉，並且可以指定旋轉中心（當然這里旋轉中心就是圖形的中央，所以不需要特別指定），使用transform:rotate(360deg)可以使圖形旋轉一周，但並不能讓它持續旋轉。在使用FireBug查看jing.fm里面的元素樣式的時候找到一個animation可以控制旋轉但復制下來后卻起不到作用。
后來查看w3School上的CSS3教程得知animation應該是和keyframe配套的，在animation上需要指定效果的名稱。繼續查找jing.fm的CSS樣式，最后終於找到了關鍵代碼，即：
1 |
@keyframes rotate{ |
2 |
from{-webkit-transform:rotate(0deg)} |
3 |
to{-webkit-transform:rotate(360deg)} |
4 |
} |
animation效果里面就是調用這個rotate。animation里面有一個選項是可以控制效果循環的次數的，當然，設成無限循環就行了。整體代碼如下：
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> |
本文固定鏈接: http://blog.icewingcc.com/css3-rotate-cdcover.html | 冰翼博客