CSS 3は絶えず回転する

最初にこの効果を見たのは音楽ステーションで、http://jing.fmああ、このサイトのインタフェースはとてもよくできていて、音楽も風格があります.私が初めてこのウェブサイトに入った时、最も兴味を持っているのはやはり中间の回転する光ディスクの表纸で、それがどのように运営されているのかを知りたいと思って、どのようにそれを私のウェブサイトのトップページの上に置いて効果を増加することができて、具体的な効果はjing.fmに行って见て、新浪微博のアカウントで登录することができます.
私が抽出した効果には、回転させるコードの一部しか含まれていません.中間の一時停止ボタンは含まれていません.ここでは、プレゼンテーションやソースコードを表示できます.
プレゼンテーションで使用した画像とCSSコードはすべてjing.fmから抽出され、私はそれをいくつか簡略化しただけです.また、私がホームページに接触したばかりなので、多くのものがまだ深く認識されていないので、今から簡単な内容を共有します.
CSSができる人はソースコードからすべてその仕事の方式を理解することができて、私はただいくつかの私自身の学習の過程の中で疑問の地方があることを説明して、もし分からないことがあるならば伝言することができます.
一、もともと矩形だった光ディスクの表紙が円形の領域にどのように埋め込まれているか
これは私が最初に最もよく知っていた問題で、どのようにCSSで図形を一つの形状に埋め込むことができて、それから画像を研究してそれが1つの中間透かしのPNG図形を一番上に置いて、表紙を下の層に置いて、position:absoluteを使って位置決めして、CDの封面を透かしの中間位置に置くことを発見しました.これで表紙を背景に埋め込んだように見えます.
二、背景図形をCDの表紙の上に置く方法
画像を見ると、いわゆる背景図形はその一部にすぎず、z-indexを使ってその階層を高くし、CDの表紙の階層を下にすることで、背景図形がCDの表紙の上に位置していることがわかります.
三、CDジャケットを自動回転させる方法
これがポイントです.CSS 3を研究したところ、transform効果でグラフィックを回転させることができ、回転中心を指定することができ(もちろんここでは回転中心がグラフィックの中央なので、特に指定する必要はありません)、transform:rotate(360 deg)を使用してグラフィックを1週間回転させることができますが、回転を続けることはできません.FireBugを使用してjing.fmの要素スタイルを表示するときにanimationを見つけて回転を制御できますが、コピーしても機能しません.
その後、w 3 SchoolのCSS 3チュートリアルを見ると、animationはkeyframeとセットになっているはずで、animationでは効果の名前を指定する必要があります.jing.fmのCSSスタイルを探し続け、ついにキーコードを見つけました.

@keyframes rotate{
from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}

animation効果ではこのrotateが呼び出されます.アニメーションには効果のループの回数を制御できるオプションがあります.もちろん、無限ループにすればいいです.全体のコードは次のとおりです.
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>