CSS로 붉은 하트를 만드는 방법-CSS 튜토리얼-php.cn

CSS로 붉은 하트를 만드는 방법

藏色散人

풀어 주다： 2023-01-03 09:26:05

원래의

2291명이 탐색했습니다.

CSS로 빨간 하트를 만드는 방법: 먼저 HTML 샘플 파일을 생성하고 CSS 속성을 통해 원을 그린 다음 마지막으로 CSS 변환의 회전 속성을 통해 하트 스타일을 구현합니다. .

CSS로 붉은 하트를 만드는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS를 사랑해 보세요

요약: HTML 태그는 비교적 간단하고 시작이 매우 빠르지만 CSS는 깊이 파고들어야 하는 요소입니다. CSS에 포함된 많은 스타일 속성은 숙달을 통해 실현될 수 있습니다. 아주 좋은 효과입니다. 이제 CSS를 사용하여 하트를 만드는 방법을 가르쳐 드리겠습니다.

기본 지식:

사각형을 그리는 방법을 이해하세요.
원을 그리는 방법을 이해합니다.
포지셔닝이 무엇인지 이해하세요.
회전 방법을 이해합니다.

더 이상 고민하지 말고 먼저 CSS를 사용하여 원을 그리는 방법을 가르쳐 드리겠습니다.

.disc1{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:300px 0px 0px 300px;
    border-radius:100%;
    float:left;
}

로그인 후 복사

우리의 사랑은 두 개의 원과 하나의 사각형으로 구성되어 있기 때문에 또 다른 원이 필요합니다.

.disc2{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:250px 0px 0px 0px;
    border-radius:100%;
    float:left;
    position: relative;
    right: 50px;
}

로그인 후 복사

[추천: "css video tutorial"]

세 번째 단계에서는 정사각형을 만들어야 합니다.

.square{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin: 300px 0px 0px 0px;
    float: left;
    position: relative;
    right: 152px;
}

로그인 후 복사

이렇게 하면 기본적으로 효과는 나왔는데, 아직 사랑의 각도를 조정해야 합니다. 이때 CSS 스타일의 변환에서 회전 속성을 사용해야 합니다.

세 개의 p를 모두 각도별로 회전해야 하므로 이 세 개의 p를 하나의 p 안에 넣습니다. 구체적인 코드는 다음과 같습니다.

.main{
    transform: rotate(45deg);
    margin: 300px;
}

로그인 후 복사

　 이제 우리의 사랑은 이루어졌습니다. 렌더링은 다음과 같습니다.

모든 코드는 다음과 같습니다(HTML 코드 및 CSS 코드 포함)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link href="css/square.css" rel="stylesheet" type="text/css">
        <title></title>
    </head>
    <body>
        <div class="main">
            <div class="disc1"></div>
            <div class="disc2"></div>
            <div class="square"></div>
        </div>
    </body>
</html>

로그인 후 복사

*{
    margin: 0px;
    padding: 0px;
}
.main{
    transform: rotate(45deg);
    margin: 300px;
}
.disc1{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:300px 0px 0px 300px;
    border-radius:100%;
    float:left;
}
.disc2{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:250px 0px 0px 0px;
    border-radius:100%;
    float:left;
    position: relative;
    right: 50px;
}
.square{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin: 300px 0px 0px 0px;
    float: left;
    position: relative;
    right: 152px;
}

로그인 후 복사

위 내용은 CSS로 붉은 하트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!