1. 效果图:

效果地址:https://codepen.io/flyingliao/pen/JgavjX

原理:m是伪元素::before弄出来的,::after遮挡中间下方一小块。

感想:学到一个复制,嘿嘿嘿嘿嘿,filter:drop-shadow(位置上、下、左、右、 颜色)。

HTML code:

<!-- mcdonalds: 麦当劳-->
<div class="mcdonalds"></div>

CSS code:

/* 清除最基本的margin和padding */
html,body{
margin:;
padding:;
}
/* 设置body的子元素水平垂直居中 */
body{
height: 100vh;
/* 水平垂直居中 */
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center,darkred,black);
font-size: 12px;
}
/* 定义mcdonalds尺寸 */
.mcdonalds{
position: relative;
width: 36em;
height: 30em;
color: red;
background-color: currentColor;
overflow: hidden;
}
/* 用伪元素画出字母m的左半边n的形状 */
.mcdonalds::before{
position:absolute;
/* 设置设置的width、height包括border、padding、content */
box-sizing: border-box;
content: '';
width: 20em;
height: calc(30em * 2);
border-width: 2.2em 4.4em;
border-style: solid;
border-color: yellow;
border-radius: 50%;
}
/* 复制左半边 */
.mcdonalds::before{
filter: drop-shadow(16em 0 0 yellow)
}
/* 用::after伪元素遮挡m中间 */
.mcdonalds::after{
position: absolute;
content: '';
width: 6em;
height: 10em;
left: calc((36em - 6em) / 2);
bottom:;
background-color: currentColor;
}

79.纯 CSS 创作单元素麦当劳金拱门 Logo(原文)的更多相关文章

  1. 79.纯 CSS 创作单元素麦当劳金拱门 Logo(自创)

    效果地址:https://scrimba.com/c/cN3P6nfr 原理:两个椭圆,颜色部分为边框,下一半被伪元素覆盖. 感想:看了一眼大神的,代码比我的还少,得研究研究去. HTML code: ...

  2. 63(原67).纯 CSS 创作单元素点阵 loader

    原文地址:https://segmentfault.com/a/1190000015444368 感想:CSS又一次让我见识到它的强大之处 --> box-shadow . box-shadow ...

  3. 如何用纯 CSS 创作单元素点阵 loader

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/YvBvBr 可交互视频 此 ...

  4. 前端每日实战:67# 视频演示如何用纯 CSS 创作单元素点阵 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/YvBvBr 可交互视频 此视频是可以 ...

  5. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  6. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  7. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  8. [转]CSS 表单元素对齐详解

    来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...

  9. 69.纯 CSS 创作一个单元素抛盒子的 loader

    原文地址:https://segmentfault.com/a/1190000015470411#articleHeader0 HTML code: <div class="loade ...

随机推荐

  1. Python--day25--接口类

    接口类,起规范作用

  2. p2p平台详细运营框架

    市场拓展部1.负责完成公司市场销售.市场拓展.费用控制等年度目标任务,并负责将目标责任制分解落实,确保各项工作目标得以实现.2.对营销政策.市场及同业营销动态等方面进行调研分析,及时调整营销策略和计划 ...

  3. Python--day38--多进程的方法属性总结

    多进程的方法属性:

  4. P1046 阶乘

    题目描述 给你一个数N,求 \(N!\) (即:N的阶乘).\(N! = N \times (N-1) \times \dots \times 2 \times 1\) 输入格式 输入一个整数 \(N ...

  5. 深度学习——CNN

    整理自: https://blog.csdn.net/woaidapaopao/article/details/77806273?locationnum=9&fps=1 思想 filter尺寸 ...

  6. Spark in action Spark 以及SparkR的安装配置说明

    Spark以及SparkR的安装(standalone模式) From :ssdutsu @ Inspur Company  suzhiyuan2006@gmail.com 操作系统 CentOS 7 ...

  7. 2019-3-8-为何使用-DirectComposition

    title author date CreateTime categories 为何使用 DirectComposition lindexi 2019-3-8 8:56:9 +0800 2018-04 ...

  8. 一个简单的Web服务器-支持Servlet请求

    上接 一个简单的Web服务器-支持静态资源请求,这个服务器可以处理静态资源的请求,那么如何处理Servlet请求的呢? 判断是否是Servlet请求 首先Web服务器需要判断当前请求是否是Servle ...

  9. Servlet request 面试题

    使用request获得请求行:String getmethod():获得请求的资源:String getcontextpath():----web应用名称request是一个域对象request完成请 ...

  10. 35.python之事件驱动模型

    转载:https://www.cnblogs.com/yuanchenqi/articles/5722574.html 事件驱动模型 上节的问题: 协程:遇到IO操作就切换. 但什么时候切回去呢?怎么 ...