순수 CSS를 사용하여 단일 요소로 구성된 맥도날드 로고를 구현하는 방법(소스 코드 첨부)-CSS 튜토리얼-php.cn

순수 CSS를 사용하여 단일 요소로 구성된 맥도날드 로고를 구현하는 방법(소스 코드 첨부)

不言

풀어 주다： 2018-09-04 11:23:51

원래의

2329명이 탐색했습니다.

이 글의 내용은 순수 CSS를 사용하여 단일 요소 맥도날드 로고를 구현하는 방법에 대한 것입니다. (소스 코드 첨부) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게 도움이 될 것입니다.

효과 미리보기

순수 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;
}

로그인 후 복사

완료되었습니다!