CSS3_html/css_WEB-ITnose によって実装されたプレーヤーの再生ボタン

完成したエフェクトは次のとおりです

エフェクトを表示してダウンロードします

ステップ 1: まずボーダーの原理を理解します:

ステップ 2: HTML コード構造

HTML コード

<section class="playContainer">
<li class="playBtn">
<a href="#" title="start">Start< ;/a>
3. </li> <li class="pauseBtn">
</ li>
5. <li class="stopBtn">
6. </li> "forwardBtn playBtn" > /li>
7. <li class="rewindBtn">
<a href="#" title="rewind">巻き戻し</a> #" title=" rewind">Rewind</a>
9. ステップ 3: 背景の円を描画します。位置: 相対
CSS コード
14. .playContainer li {位置: 相対; : 左; 境界線: 25px 色: #4040; 高さ: 0; -moz-border-radius: 100%; : 100%; border-radius: 100%; margin: 0 20px; }
ステップ 4: 停止ボタンを描画し、ボタンを中央に配置します。
ボタンは円の中心から開始して外側の円に対して絶対的に配置されるため、上と左の値を調整します
停止ボタンの辺の長さは 14 ピクセルであり、原点に対して左上に 7 ピクセル移動し、中央に配置します。

すべての CSS は次のとおりです:

CSS コード

1. .playContainer { 位置: 相対; フロート: 左; 背景: rgba(0, 0, 0, 0.8); パディング: 20px; }
2. .playContainer li { 位置: 相対; フロート: 左; ボーダー: 25px solid #404040; 色: #404040; 高さ: 0; 幅:0; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; 境界半径: 100%; マージン: 0 20px; }
3. .playContainer a { border-style: solid; テキストインデント: -9999px; 位置: 絶対的; 上: -8px; 左: -3px;  }
5. .playBtn a { border-color: transparent transparent transparent #fff; ボーダー幅: 8px 0 8px 12px;  幅: 0; 高さ: 0; }
6. .pauseBtn a { border-color: transparent white;  境界線の幅: 0 6px; 高さ: 15ピクセル; 幅: 6px; 左: -9px; }
7. .stopBtn a { border: 7px solid #fff; 高さ: 0; 幅: 0; 左: -7px; top: -7px;}
8. .forwardBtn a { border-left-width: 8px; 左: 1ピクセル; }
9. .forwardBtn a:first-child { margin-left: -7px;  }
11. .rewindBtn a { border-width: 8px 8px 8px 0; 境界線の色: 透明 #fff 透明 透明; 幅: 0; 高さ: 0; }
12. .rewindBtn a:first-child { margin-left: -7px; }
14. .ejectBtn a.arrow { border-width: 0 8px 8px 8px; 境界線の色: 透明 透明 #fff 透明; 上:-26px; 左:-8px; }
15. ectBtn a.dash { border-width: 0 0 4px; 境界線の色: 透明 透明 #fff; 高さ: 0; 幅:16ピクセル; 左: -8px; 上: 4ピクセル; }