純粋な 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>

ログイン後にコピー

Centered Display :

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%;
}

ログイン後にコピー

右半分 n の形状である左半分をコピーし、左側は文字 m を形成します:

.mcdonalds::before {
    filter: drop-shadow(16em 0 0 yellow);
}

ログイン後にコピー

擬似要素を使用して文字 m を覆い、中央の垂直線の下部に少し追加して両側の垂直線を長く見せます:

.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;
}

ログイン後にコピー

これで完了です!