前端日常实战：79#视频演示如何使用纯CSS制作单元素麦当劳金拱门Logo
时间：2023-04-02 22:38:06
HTML
效果预览在当前页面点击右侧的“点击预览”按钮进行预览，点击全屏预览链接。https://codepen.io/comehop??e/pen/mjVVmY互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cewvyhq源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，只有1个元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:radial-gradient(circleatcenter,darkred,black);}定义容器尺寸：.mcdonalds{width:36em;高度：30em；字体大小：5px；红色;background-color:currentColor;}drawwithpseudo-element输出字母m左半边n的形状:.mcdonalds{position:relative;溢出：隐藏；}.mcdonalds::before{内容：''；位置：绝对；宽度：20em；高度：计算（30em*2）；框大小：边框框；边框：纯黄色；边框宽度：2.2em4.4em；border-radius:50%;}复制左半边，即右半边n的形状，用左边字母m组成：.mcdonalds::before{filter:drop-shadow(16em00yellow);}用伪元素把字母m的中间竖线底部稍微盖住，让两边的竖线看起来更长：.mcdonalds::after{content:'';位置：绝对；宽度：6em；高度：1.5em；背景颜色：currentColor；左：计算（（36em-6em）/2）；bottom:0;}最后，将红色背景再延伸一点：.mcdonalds{box-shadow:00010em;}大功告成！
