이 기사의 내용은 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; }
.duck { display: grid; grid-template-columns: repeat(2, 1fr); } .duck span { background-color: seagreen; }
.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!