DIV CSS 佈局教程網

現在許多有背景音樂的特效，都會提供一個圖標控制播放和暫停。播放時圖標不斷旋轉，暫停時就靜止不動。例如下面何問起生日快樂例子。

http://hovertree.com/wx/hwq/9/

效果圖：


也可以在微信查看效果，關注何問起的微信公眾號， 賬號 ihewenqi ，或者微信掃描下面二維碼：


關注後發送 生日 ，根據回復內容查看效果。

另一個例子：http://hovertree.com/hvtart/bjae/ajyo2cux.htm

那麼這個旋轉的音樂圖標效果是怎麼實現的呢？

首先是動畫，動畫是用CSS3實現的，控制則可以用JS實現。

CSS3的動畫可以用animation 屬性定義。參考：
http://hovertree.com/h/bjaf/pr_animation.htm

一個例子：
http://hovertree.com/texiao/css/14/1.htm

代碼：
<style>div.movehovertree {
width: 140px;
height: 140px;
background-color:darkgreen;

position: relative;/*如果是左右移動，這句要加上，不加就不可以。*/

animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite; /*Safari and Chrome*/
margin:2px;
}

@keyframes mymove {
from {
left: 0px;
}

to {
left: 200px;
}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {
left: 0px;
}

to {
left: 100px;
}
}
</style>
<div class="movehovertree">何問起</div>效果如下： 何問起

這個是水平移動動畫的代碼，那麼旋轉呢，旋轉可以用CSS3 的transform 屬性定義，參考：
http://hovertree.com/h/bjaf/pr_transform.htm

示例代碼：
<style>div.rotateHovertree
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style><div class="rotateHovertree">hovertree.com</div>
效果如下：hovertree.com

接下來就是旋轉加動畫，旋轉從 0度到360度，示例代碼：<style>div.runhovertree {
width: 140px;
height: 140px;
background-color:darkgreen;

position: relative;/*如果是左右移動，這句要加上，不加就不可以。*/

animation: myrun 5s infinite;
-webkit-animation: myrun 5s infinite; /*Safari and Chrome*/
margin:2px;
}

@keyframes myrun {
from {
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* Internet Explorer */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
-o-transform:rotate(0deg); /* Opera */
}

to {
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* Internet Explorer */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg); /* Opera */
}
}

@-webkit-keyframes myrun /*Safari and Chrome*/
{
from {
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* Internet Explorer */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
-o-transform:rotate(0deg); /* Opera */
}

to {
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* Internet Explorer */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg); /* Opera */
}
}
</style>
<div class="runhovertree">何問起</div>

效果如下： 何問起

接下來把div背景圖片設為音樂圖標，去掉背景色，設置合適的高寬。查看效果：http://hovertree.com/texiao/css3/3/1.htm

音樂圖標動起來了，轉起來了。但是好像跟使用中的效果的不一樣。
對比http://hovertree.com/wx/hwq/9/
可以發現，轉動的時候時快時慢。

那麼怎樣規定速度呢?只需animation屬性加上linear值就可以了。參考：http://hovertree.com/h/bjaf/pr_transition-timing-function.htm

點擊這裡查看效果：http://hovertree.com/texiao/css3/3/2.htm

代碼如下：
<style>
div.hovertreemusic {
width: 45px;
height: 45px;
animation: hovertreerotate 2s linear infinite;
-webkit-animation: hovertreerotate 2s linear infinite; /*Safari and Chrome*/
margin: 2px;
background-image: url(http://hovertree.com/wx/hwq/10/css/music_note_big.png);
}

@keyframes hovertreerotate {
from {
transform: rotate(0deg);
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
-o-transform:rotate(0deg); /* Opera */
}

to {
transform: rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg); /* Opera */
}
}

@-webkit-keyframes hovertreerotate /*Safari and Chrome*/
{
from {
transform: rotate(0deg);
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
-o-transform:rotate(0deg); /* Opera */
}

to {
transform: rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg); /* Opera */
}
}
</style>
<div class="hovertreemusic"></div>

接下來就實現點擊停止轉動或者開始轉動。使用js實現，給div加上id屬性:
id="hovertreemusic"
點擊的時候判斷className,如果包含hovertreemusic就移除，不包含就加入。
效果：http://hovertree.com/texiao/css3/3/3.htm