純粋な CSS を使用して単一要素のマクドナルドのロゴを実装する方法 (ソースコードは添付)

この記事の内容は、純粋な CSS を使用して単一要素のマクドナルドのロゴを実装する方法に関するものです (ソースコードが添付されています)。必要な友人が参考になれば幸いです。 。

エフェクトのプレビュー

ソースコードのダウンロード

https://github.com/comehop​​e/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;
}

これで完了です!

関連する推奨事項:

純粋な CSS を使用して段差でボールがジャンプするアニメーション効果を実現する方法 (ソース コードが添付)

純粋な CSS を使用して旗が飛んでいるようなアニメーション効果を実現する方法 (ソース コード)コードが添付されています)

以上が純粋な CSS を使用して単一要素のマクドナルドのロゴを実装する方法 (ソースコードは添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。