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

不言
풀어 주다: 2018-08-20 10:00:53
원래의
2092명이 탐색했습니다.

이 기사의 내용은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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