CSS로 붉은 하트를 만드는 방법
- 藏色散人원래의
- 2021-02-28 15:17:062278검색
CSS로 빨간 하트를 만드는 방법: 먼저 HTML 샘플 파일을 생성하고 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS에서 직각 삼각형을 작성하는 방법다음 기사：CSS에서 직각 삼각형을 작성하는 방법