CSS3 그리기 동심원 샘플 코드

이 글에서는 CSS3를 사용하여 동심원을 그리는 방법에 대한 관련 정보를 주로 소개합니다. 이 글에서는 자세한 CSS3 샘플 코드를 제공하고 코드에 대한 자세한 분석을 수행하여 모든 사람이 동심원을 그리는 방법을 이해하고 배우는 데 도움이 될 것입니다. css3를 활용해 학습 가치를 익히는 것이 모두에게 도움이 되기를 바랍니다.

기본 아이디어

먼저 세 개의 원을 그려야 합니다. 그러면 세 개의 원이 어떻게 겹쳐질까요? 이는 -margin으로 제어되어야 합니다.

<p>
    </p><p></p>
    <p></p>
    <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는 왼쪽으로 125px 이동을 의미하고, 25는 25px 아래로 이동한다는 의미입니다. 왜 왼쪽으로 125px 이동했나요? 이는 중학교 때 수학을 얼마나 공부했느냐에 따라 달라집니다. 두 원의 중심 사이의 거리. 큰 원의 반경은 75px이고, 가운데 원의 반경은 50px입니다. 즉, 큰 원과 작은 원의 중심 사이의 거리는 125px입니다.

25px의 수직 이동은 원의 수직 중심 거리가 25px이기 때문입니다.

요약

마진 값으로 표현되는 이동 방향에 대한 이해가 끝났습니다!

관련 추천:

미니언을 그리고 애니메이션 효과를 얻기 위한 순수 CSS3

css3 draw semicircle_html/css_WEB-ITnose

CSS를 사용하여 러브 코드 예제 그리기

위 내용은 CSS3 그리기 동심원 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!