css3強大的動畫效果animate使用說明及瀏覽器兼容介紹

2024-07-11 08:29:05

字體：大中小

來源：轉載

供稿：網友

好久沒更新blog，上次發文（11月8日）到現在剛好一個月，期間項目上的東西比較多，一時覺得時間比較緊，沒來得及更新。這個星期總算是告一段落，補上幾篇技術性的文章。好吧，第一篇是關于css3動畫的使用。
昨天突然看到jing.fm（這個音樂網站非常不錯，很多效果我都很喜歡，如果你有興趣，可以去圍觀下）上音樂播放時，專輯的轉動效果很不錯，所以準備自己動手寫下，以備后用。結果第一次使用animate就遇到了坑爹的事情，特吐槽下。
一、最終的效果

如上圖所示，最終是想讓這個專輯的圖片轉動起來，模擬出唱片播放的效果（你可以去jing.fm上看看真實的效果，很贊，現在很多音樂網站都添加了這個效果）。
二、結構代碼

復制代碼

代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>音樂專輯播放模擬</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="bd">
<div id="musicBox">
<div class="cover rotateCD"></div>
<div class="mask"></div>
</div>
</div>
</body>
</html>

從上面的代碼可以看出，由于是使用css3強大的動畫效果，所以我的結構定義的非常簡單（在符合語義的前提下），同時沒有引用到javascript腳本文件。
musicBox來限定外圍框的大小，內部的cover用來顯示專輯封面圖片，這個圖片是下圖左邊圖片這樣的，四四方方，不是圓形，所以我在后面做了個mask的div，它不做其他事情，只是用來容納一個遮罩（下圖右邊圖片），蓋住圖片圓形之外的部分。

三、css3樣式表

復制代碼

代碼如下:
@charset utf-8;
/* common: rotateCD */
@-webkit-keyframes myrotate{
0%{
-webkit-transform : rotate(0deg);
}
100%{
-webkit-transform : rotate(360deg);
}
}
@-moz-keyframes myrotate{
0%{
-moz-transform : rotate(0deg);
}
100%{
-moz-transform : rotate(360deg);
}
}
@-ms-keyframes myrotate{
0%{
-ms-transform : rotate(0deg);
}
100%{
-ms-transform : rotate(360deg);
}
}
@-o-keyframes myrotate{
0%{
-o-transform : rotate(0deg);
}
100%{
-o-transform : rotate(360deg);
}
}
@keyframes myrotate{
0%{
transform : rotate(0deg);
}
100%{
transform : rotate(360deg);
}
}
.rotateCD{
-webkit-animation: myrotate 9.5s infinite linear;
-moz-animation: myrotate 9.5s infinite linear;
-ms-animation: myrotate 9.5s infinite linear;
-o-animation: myrotate 9.5s infinite linear;
animation: myrotate 9.5s infinite linear;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-ms-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
/* module: bd */
#bd{width: 960px;margin: 200px auto 0;}
/* module: musicBox */
#musicBox{position: relative;width: 430px;height: 430px;margin: 0 auto;overflow: hidden;}
#musicBox .cover{width: 300px;height: 300px;margin: 65px;background: url(../img/music1.jpg) 0 0 no-repeat;}
#musicBox .mask{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../img/playerMask.png) 0 0 no-repeat;}

上一篇：ul, li, a怎么用(谷歌/火狐/ie6/7/8)中測試

下一篇：css 背景透明元素(標簽)背景透明的css設計

發表評論

共有條評論