css3同心円描画サンプルコード

この記事では、css3 を使用して同心円を描画する方法に関する関連情報を主に紹介します。この記事では、詳細な css3 サンプル コードを示し、コードの詳細な分析を行っています。これは、誰もが同心円を描画する方法を理解し学習するのに役立ちます。 css3 の参考学習値です。皆様のお役に立てれば幸いです。

基本的な考え方

まず、3つの円を描く必要があります。次に、3つの円はどのように重なるでしょうか。これは -margin で制御する必要があります。

<p id="tongxin">
    <p id=&#39;t1&#39;></p>
    <p id="t2"></p>
    <p id="t3"></p>
</p>

css

        #t1 {
            float:left;
            width:150px;
            height:150px;
            background: pink;
            border-radius:75px ;
        }
        #t2 {    
            float:left;
            width:100px;
            height:100px;
            margin-left:-125px;/*move to left 125px*/
            margin-top:25px;/* move to bottom 25px*/
            background: green;
            border-radius: 50px;
        }
        #t3 {
            float:left;
            width:50px;
            height:50px;
            margin-left:-100px;/*move left 100px*/
            margin-top:50px;
            background: yellow;
            border-radius: 25px;
        }

Result

コード分析

上記のコードをどう理解するか?たとえば、t2 の margin-left:-125px です。 margin-top:25px; 下の図を見てください

-125 は左に 125 ピクセル移動することを意味し、25 は下に 25 ピクセル移動することを意味します。なぜ 125 ピクセル左に移動するのでしょうか? これは、中学校でどれだけ数学を勉強したかによって異なります。 2 つの円の中心間の距離。大きな円の半径は 75 ピクセル、中央の円の半径は 50 ピクセルです。つまり、大きな円と小さな円の中心間の距離は125pxです。

25pxの垂直方向の移動は、円の垂直方向の中心距離が25pxであるためです。

まとめ

これでマージン値が表す移動方向の理解は完了です！

関連する推奨事項:

ミニオンを描画し、アニメーション効果を実現するための純粋な CSS3

css3 描画 semicircle_html/css_WEB-ITnose

CSS を使用して愛のコード例を描画する

以上がcss3同心円描画サンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。