CSS를 사용하여 하트를 그리는 코드 예제-CSS 튜토리얼-php.cn

CSS를 사용하여 하트를 그리는 코드 예제

巴扎黑

풀어 주다： 2017-03-14 10:32:30

원래의

5331명이 탐색했습니다.

오늘 Xiaoying이 CSS로 그린 하트를 여러분과 공유하겠습니다. 아래 코드와 제작 과정이 모두에게 도움이 되기를 바랍니다.

1단계:

먼저 정사각형을 그립니다. 그림과 같이:

CSS를 사용하여 하트를 그리는 코드 예제

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css画桃心</title>
    <style media="screen">
        .heart-body {
            width: 500px;
            margin: 100px auto;
            position: relative;
        }
        .heart-shape {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #f70e0e;
        }
    </style>
</head>
<body>
    <p class="heart-body">
        <p class="heart-shape"></p>
    </p>
</body>
</html>

로그인 후 복사

2단계:

사용 의사 before 및 :after 요소의 경우 사각형의 왼쪽과 상단에 사각형을 그린 다음 border-radius: 50%를 사용합니다. ; 속성 을 사용하여 이 두 사각형을 수정한 다음 그림과 같이 두 개의 원을 얻습니다.

CSS를 사용하여 하트를 그리는 코드 예제

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: &#39;&#39;;
            width: 100px;
            height: 100px;
            background-color: #ffc0cb;
        }
        .heart-shape:before {
            left: -45px;
        }
        .heart-shape:after {
            top: -45px;
        }

로그인 후 복사

경계 반경 사용: 50%; 속성:

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: &#39;&#39;;
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            /**兼容苹果；谷歌，等一些浏览器认*/
            -moz-border-radius: 50%;
            /**兼容火狐浏览器*/
            -o-border-radius: 50%;
            /**兼容opera浏览器*/
            border-radius: 50%;
            background-color: #ffc0cb;
        }

로그인 후 복사

3단계:

클래스 이름이 heart-shape인 P는 그림과 같이 변환: 회전(45deg); 속성을 사용하여 45도 회전합니다.

CSS를 사용하여 하트를 그리는 코드 예제

.heart-shape {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #f70e0e;
            -webkit-transform: rotate(45deg);
            /* Safari 和 Chrome */
            -moz-transform: rotate(45deg);
            /* Firefox */
            -ms-transform: rotate(45deg);
            /* IE 9 */
            -o-transform: rotate(45deg);
            /* Opera */
            transform: rotate(45deg);
        }

로그인 후 복사

샤오잉은 둥근 배경색과 사각형 배경색을 같은 색으로 지정하지 않아 누구나 눈에 띄는 효과를 볼 수 있습니다. 다음으로 샤오잉은 배경을 설정합니다. 색상이 균일해지면 그림과 같이 마지막 사랑이 나타납니다.

CSS를 사용하여 하트를 그리는 코드 예제

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: &#39;&#39;;
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            /**兼容苹果；谷歌，等一些浏览器认*/
            -moz-border-radius: 50%;
            /**兼容火狐浏览器*/
            -o-border-radius: 50%;
            /**兼容opera浏览器*/
            border-radius: 50%;
            background-color: #f70e0e;
        }

로그인 후 복사

위 다음 CSS를 사용하여 하트를 그리는 과정에 대해 에디터가 소개한 자세한 설명입니다. 궁금한 점이 있으시면 메시지를 남겨주시면 에디터가 시간에 맞춰 답변해 드리겠습니다. 또한 Script House 웹사이트를 지원해 주신 모든 분들께 감사의 말씀을 전하고 싶습니다!

위 내용은 CSS를 사용하여 하트를 그리는 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!