집 > 기사 > 웹 프론트엔드 > CSS는 붉은 심장을 그립니다.

CSS는 붉은 심장을 그립니다.

php中世界最好的语言원래의: 2018-03-22 11:14:092419검색

이번에는 빨간 하트를 그리는 CSS를 가져오겠습니다. CSS로 빨간 하트를 그릴 때 주의사항은 무엇인가요?

1단계:

먼저 정사각형을 그립니다. 그림에 표시된 대로:

<!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단계:

는 전후의 의사 요소를 사용하여 정사각형의 왼쪽과 상단에 정사각형을 그린 다음 테두리 반경을 사용합니다. : 50%; 속성, 이 두 사각형을 수정한 다음 그림과 같이 두 개의 원을 얻습니다.

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: '';
            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: '';
            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입니다. 그림과 같이 변환:rotate(45deg) 속성을 사용하여 45도 회전합니다.

.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);
        }

Xiaoying은 원의 배경색을 변경합니다. 그리고 사각형의 배경색 통일된 색상을 주지 않은 이유는 모두가 눈에 띄는 효과를 더 잘 볼 수 있도록 하기 위함입니다. 다음으로 샤오잉은 배경색을 통일된 색상으로 설정하여 그림과 같이 최종 사랑이 나왔습니다. 사진 속:

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!