이 글의 내용은 순수 CSS를 사용하여 단일 요소 맥도날드 로고를 구현하는 방법에 대한 것입니다. (소스 코드 첨부) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게 도움이 될 것입니다.
https://github .com/comehope/front-end-daily-challenges
dom 정의, 1개 요소만 정의:
<div></div>
중앙 디스플레이: # 🎜🎜#
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, darkred, black);
}컨테이너 크기 정의:
.mcdonalds {
width: 36em;
height: 30em;
font-size: 5px;
color: red;
background-color: currentColor;
}의사 요소를 사용하여 문자 m의 왼쪽 절반 n의 모양을 그립니다.
.mcdonalds {
position: relative;
overflow: hidden;
}
.mcdonalds::before {
content: '';
position: absolute;
width: 20em;
height: calc(30em * 2);
box-sizing: border-box;
border: solid yellow;
border-width: 2.2em 4.4em;
border-radius: 50%;
}복사 왼쪽 절반 부분, 즉 왼쪽과 함께 문자 m을 형성하는 n의 오른쪽 절반의 모양:
.mcdonalds::before {
filter: drop-shadow(16em 0 0 yellow);
} 의사 요소를 사용하여 가운데 수직선의 하단을 약간 덮습니다. 양쪽의 수직선이 더 길게 보이도록 비트를 조금 조정합니다. # 🎜🎜#.mcdonalds::after {
content: '';
position: absolute;
width: 6em;
height: 1.5em;
background-color: currentColor;
left: calc((36em - 6em) / 2);
bottom: 0;
}
마지막으로 빨간색 배경을 바깥쪽으로 확장합니다.
.mcdonalds {
box-shadow: 0 0 0 10em;
}
완료되었습니다!
관련 권장 사항:
순수한 CSS를 사용하여 공 점프 단계의 애니메이션 효과를 얻는 방법(소스 코드 포함)#🎜🎜 #깃발을 흔드는 애니메이션 효과를 얻기 위해 순수 CSS를 사용하는 방법(소스 코드 포함)
위 내용은 순수 CSS를 사용하여 단일 요소로 구성된 맥도날드 로고를 구현하는 방법(소스 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!