CSS를 사용하여 모자를 쓴 자이언트 팬더를 구현하는 방법(코드 포함)

이 글의 내용은 CSS를 사용하여 모자를 쓴 자이언트 팬더를 구현하는 방법에 대한 것입니다.(코드 포함) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

다크서클이 있는 자이언트 팬더가 너무 귀엽습니다. 오늘은 CSS를 사용하여 다음과 같은 귀여운 자이언트 팬더를 구현해보겠습니다

코드는 https://codepen.io/woshilyy/p.. .

본체 코드:

<div>
        <span></span>
        <span></span>
        <span></span>
        <span>
            <span></span>
        <span></span>
        <span></span>
        <span></span>
        </span>
    </div>

상세 코드 설명:

1. 모자 만들기

테두리를 사용하여 삼각형을 만들고, 의사 클래스를 사용하여 모자에 공을 만듭니다. 팬더 얼굴 하하하

.hat {
            position: absolute;
            border-bottom: 150px solid red;
            border-left: 75px solid transparent;
            border-right: 75px solid transparent;
            left: 75px;
            z-index: 2;
        }
        
        .hat::before {
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #fff;
            left: -15px;
            top: -8px;
        }

3 , 눈을 만들어 보세요

방사형 그래디언트를 사용하여 만듭니다. 두 눈이 대칭으로 회전하기 때문에 변수를 사용하여 회전을 제어하고 그림자를 추가하여 눈을 더욱 사실적으로 만듭니다

.face {
            position: absolute;
            width: 300px;
            height: 250px;
            background-color: #fff;
            border-radius: 50%;
            top: 133px;
        }

4. 코를 만들어주세요

코는 그냥 타원+그림자

.eyes {
            position: absolute;
            width: 100px;
            height: 80px;
            border-radius: 50%;
            transform: rotate(calc(-60deg * var(--n)));
        }
        
        .eyesLeft {
            left: 10px;
            top: 100px;
            --n: 1;
            background: radial-gradient(circle at 53% 72%, #fff 1px, transparent 1px), radial-gradient(circle at 50% 80%, #fff 3px, transparent 3px), radial-gradient(circle at 50% 75%, #000 8px, transparent 8px), radial-gradient(circle at 50% 70%, white 15px, transparent 15px), #000;
            box-shadow: -3px 3px 0 3px rgba(0, 0, 0, .1);
        }
        
        .eyesRight {
            right: 10px;
            top: 100px;
            --n: -1;
            background: radial-gradient(circle at 45% 74%, #fff 1px, transparent 1px), radial-gradient(circle at 50% 80%, #fff 3px, transparent 3px), radial-gradient(circle at 50% 75%, #000 8px, transparent 8px), radial-gradient(circle at 50% 70%, white 15px, transparent 15px), #000;
            box-shadow: 3px 3px 0 3px rgba(0, 0, 0, .1);
        }

다섯. 입을 만들어주세요

배경색을 투명한 둥근사각형+검은색 테두리로 만들고, 위쪽 테두리를 없애주세요

.nose {
            position: absolute;
            width: 50px;
            height: 20px;
            background-color: #666;
            border-radius: 50%;
            left: calc((300px - 50px)/2);
            box-shadow: 2px 2px 0 2px rgba(0, 0, 0, .1);
            bottom: 60px;
        }

여섯번째. : 귀 만들기

두 개의 검은색 타원, 너비 > 높이

 .mouth {
            position: absolute;
            width: 100px;
            height: 20px;
            background-color: transparent;
            border-bottom: 10px solid #000;
            border-radius: 77% 77% 77%/60% 60% 90% 90%;
            bottom: 20px;
            left: calc((300px - 100px)/2);
        }

관련 권장 사항:

CSS를 사용하여 오리 머리를 구현하는 방법(코드 포함)

순수한 CSS를 사용하여 움직이는 흰 토끼를 구현하는 방법 애니메이션 효과

위 내용은 CSS를 사용하여 모자를 쓴 자이언트 팬더를 구현하는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!