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

php中世界最好的语言
풀어 주다: 2018-03-22 11:14:09
원래의
2484명이 탐색했습니다.

이번에는 빨간 하트를 그리는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

css3 다중 클래스 선택기 사용에 대한 자세한 설명

CSS에서 배경 첨부 사용에 대한 자세한 설명

부트스트랩 구현 가격표

위 내용은 CSS는 붉은 심장을 그립니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿