ホームページ >ウェブフロントエンド >CSSチュートリアル >css3を使って5つのオリンピックリングを実現する
CSS3 で 5 つのオリンピック リングを実装する方法: まず、5 つの div の境界半径スタイルを設定し、5 つのリングを作成します。次に、position 属性を使用して 5 つのリングの位置を設定し、最後に z-調整するindex属性 各リング間の階層関係だけで十分です。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
5 つのリングは 5 つの統計 div を使用して実現できますが、5 つのリングの入れ子関係を実現するには、これら 5 つの div にそれぞれ疑似要素を追加する必要があります。
ここでは主に 2 つの css3 属性が使用されます:
1. z-index は各リングの階層関係を調整します
2.transparent は透明度を設定します
特定のコード:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; border: 10px solid; border-radius: 50%; float: left; position: absolute; } div::after{ width: 200px; height: 200px; border: 10px solid; border-radius: 50%; float: left; position: absolute; content: ""; left: -10px;/*相对于父级定位,但不包括border,所以利用负边距使他们重合*/ top:-10px; } .blue{ border-color: blue; top:0; left: 0; } .blue::after{ border-color: blue; z-index: 1; border-bottom-color: transparent;/*将下边框设为透明,使看到的为黄色环 以下同理*/ } .black{ border-color: black; top:0; left: 230px; } .black::after{ border-color: black; z-index: 1; border-left-color: transparent; } .red{ border-color: red; top:0; left: 460px; } .red::after{ border-color: red; z-index: 1; border-left-color: transparent; } .yellow{ border-color: yellow; top:110px; left: 110px; } .yellow::after{ border-color: yellow; } .green{ border-color: green; top:110px; left: 340px; } .green::after{ border-color: green; z-index: 1; border-top-color: transparent; border-right-color: transparent; } </style> </head> <body> <div class="blue"></div> <div class="black"></div> <div class="red"></div> <div class="yellow"></div> <div class="green"></div> </body> </html>
レンダリング:
関連する学習ビデオの推奨事項: css ビデオ チュートリアル
以上がcss3を使って5つのオリンピックリングを実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。