css3を使って同心円を描く方法-CSSチュートリアル-php.cn

css3を使って同心円を描く方法

不言

リリース： 2018-06-26 13:56:59

オリジナル

2261 人が閲覧しました

この記事では、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;
        }

ログイン後にコピー

結果

コード分析

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

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

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