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 중국어 웹사이트의 기타 관련 기사를 참조하세요!