>  기사  >  웹 프론트엔드  >  CSS로 붉은 하트를 만드는 방법

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

藏色散人
藏色散人원래의
2021-02-28 15:17:062262검색

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

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

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

CSS를 사랑해 보세요

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

기본 지식:

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

더 이상 고민하지 말고 먼저 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.