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

이 기사의 내용은 CSS를 사용하여 오리 머리를 구현하는 방법에 대한 것입니다. 필요한 참조 가치가 있습니다. 당신이 도움이되었습니다.

효과 미리보기

소스코드 다운로드

https ://github.com/comehope/front-end-daily-challenges

코드 해석

Define dom, 컨테이너에는 4가지 요소가 포함됩니다:

<figure>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</figure>

# 🎜 🎜#중앙 디스플레이:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: papayawhip;
  }

컨테이너 크기 정의:

.duck {
    width: 10em;
    height: 10em;
}

그리드를 사용하여 4개의 정사각형을 2*2 레이아웃으로 누르기:

.duck {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.duck span {
    background-color: seagreen;
}

회전 컨테이너 45도:

.duck {
    transform: rotate(-45deg);
}

각 사각형의 둥근 모서리를 설정하여 추상적인 오리 모양을 형성합니다.

.duck span:nth-child(1) {
    border-top-left-radius: 100%;
}

.duck span:nth-child(2) {
    border-top-right-radius: 100%;
}

.duck span:nth-child(3) {
    border-bottom-right-radius: 100%;
}

.duck span:nth-child(4) {
    border-bottom-left-radius: 100%;
}

마지막 사각형에 차별화된 색상을 설정하여 오리 부리처럼:

.duck span:nth-child(4) {
    background-color: coral;
}

두 번째 사각형에 방사형 그라데이션으로 점을 그려 오리 눈을 표현합니다.

.duck span:nth-child(2) {
    background-image: radial-gradient(black 0.5em, transparent 0.5em);
}

끝났습니다!

관련 권장 사항:

순수한 CSS를 사용하여 검은 앵그리 버드를 구현하는 방법(코드 포함) #🎜🎜 #

CSS와 D3를 사용하여 흑백이 겹치는 애니메이션 효과를 얻는 방법

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