CSS로 빨간 하트를 만드는 방법: 먼저 HTML 샘플 파일을 생성하고 CSS 속성을 통해 원을 그린 다음 마지막으로 CSS 변환의 회전 속성을 통해 하트 스타일을 구현합니다. .
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
CSS를 사랑해 보세요
요약: HTML 태그는 비교적 간단하고 시작이 매우 빠르지만 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!