wulin.com（www.vevb.com）の記事紹介：最近、HTML5+CSS3を学び、CSS3を練習し、いくつかのプレーヤーボタンを描画し始めました。
最近、HTML5+CSS3の学習を開始し、CSS3を練習し、いくつかのプレーヤーボタンを描きました。より良い提案があれば、私はあなたが指摘できることを願っています...
<！doctype>
<html>
<head>
<メタcharset = utf-8 />
<style>
体{
背景：＃000;
}
ヘッダ{
フォントファミリー：Microsoft Yahei;
フォントサイズ：30px;
色：＃990000;
}
。丸{
幅：120px;
高さ：120px;
-webkit-border-radius：60px;
-moz-border-radius：60px;
ボーダーラジウス：60px;
ボーダー：2px #fff solid;
フロート：左;
マージン：10px;
カーソル：ポインター;
}
.circle：Hover、.circle1：Hover {
-webkit-box-shadow：rgba（255,255,255,0.6）0 0 15px;
-moz-box-shadow：rgba（255,255,255,0.6）0 0 15px;
Box-Shadow：RGBA（255,255,255,0.6）0 0 15px;
}
.circle1 {
幅：140px;
高さ：140px;
-webkit-border-radius：70px;
-Moz-Border-Radius：70px;
ボーダーラジウス：70px;
ボーダー：2px #fff solid;
フロート：左;
カーソル：ポインター;
}
.triangleright {
幅：0;
高さ：0;
国境左：60pxソリッド#fff;
ボーダートップ：30px固体透明。
国境圏：30px固体透明。
-webkit-transform：スケール（0.6,1.2）;
-moz-transform：スケール（0.6,1.2）;
変換：スケール（0.6,1.2）;
}
.next1 {
マージン：30px -10px 0 20px;
フロート：左;
}
.next2 {
マージン：30px 0 0 -20px;
フロート：左;
}
.triangleleft {
幅：0;
高さ：0;
国境右：60pxソリッド#fff;
ボーダートップ：30px固体透明。
国境圏：30px固体透明。
-webkit-transform：スケール（0.6,1.2）;
-moz-transform：スケール（0.6,1.2）;
変換：スケール（0.6,1.2）;
}
.pre1 {
マージン：30px -10px 0 10px;
フロート：左;
}
.pre2 {
マージン：30px 0 0 -20px;
フロート：左;
}
。一時停止{
幅：20px;
高さ：80px;
背景：#fff;
フロート：左;
}
.pause1 {
マージン：30px 10px 0 40px;
}
.pause2 {
マージン：30px 10px 0 10px;
}
</style>
</head>
<body>
<ヘッダー>プレーヤーボタン</header> <ection>
<div class = circle>
<div class = triAngleleft pre1> </div>
<div class = triAngleleft pre2> </div>
</div>
<div class = circle1>
<div class =一時停止Pause1> </div>
<div class =一時停止Pause2> </div>
</div>
<div class = circle>
<div class = triangleright next1> </div>
<div class = triangleright next2> </div>
</div>
</section>
</body>
</html>