怎么用純CSS實現(xiàn)單元素麥當(dāng)勞的Logo

這篇文章給大家分享的是有關(guān)怎么用純CSS實現(xiàn)單元素麥當(dāng)勞的Logo的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

　　代碼解讀

　　定義dom，只有1個元素：

　　<divclass="mcdonalds"></div>

　　居中顯示：

　　body{

　　margin:0;

　　height:100vh;

　　display:flex;

　　align-items:center;

　　justify-content:center;

　　background:radial-gradient(circleatcenter,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:solidyellow;

　　border-width:2.2em4.4em;

　　border-radius:50%;

　　}

　　把左半邊復(fù)制一份，即是右半邊n的形狀，和左邊一起組成了字母m：

　　.mcdonalds::before{

　　filter:drop-shadow(16em00yellow);

　　}

　　用偽元素遮住字母m中間豎線底部一點點，使兩邊的豎顯得長一些：

　　.mcdonalds::after{

　　content:'';

　　position:absolute;

　　width:6em;

　　height:1.5em;

　　background-color:currentColor;

　　left:calc((36em-6em)/2);

　　bottom:0;

　　}

　　最后，將紅色背景向外延伸一些：

　　.mcdonalds{

　　box-shadow:00010em;

　　}

感謝各位的閱讀！關(guān)于“怎么用純CSS實現(xiàn)單元素麥當(dāng)勞的Logo”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！