79.纯 CSS 创作单元素麦当劳金拱门 Logo(原文)
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(原文)的更多相关文章
- 79.纯 CSS 创作单元素麦当劳金拱门 Logo(自创)
效果地址:https://scrimba.com/c/cN3P6nfr 原理:两个椭圆,颜色部分为边框,下一半被伪元素覆盖. 感想:看了一眼大神的,代码比我的还少,得研究研究去. HTML code: ...
- 63(原67).纯 CSS 创作单元素点阵 loader
原文地址:https://segmentfault.com/a/1190000015444368 感想:CSS又一次让我见识到它的强大之处 --> box-shadow . box-shadow ...
- 如何用纯 CSS 创作单元素点阵 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/YvBvBr 可交互视频 此 ...
- 前端每日实战:67# 视频演示如何用纯 CSS 创作单元素点阵 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/YvBvBr 可交互视频 此视频是可以 ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- [转]CSS 表单元素对齐详解
来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...
- 69.纯 CSS 创作一个单元素抛盒子的 loader
原文地址:https://segmentfault.com/a/1190000015470411#articleHeader0 HTML code: <div class="loade ...
随机推荐
- Python--day25--接口类
接口类,起规范作用
- p2p平台详细运营框架
市场拓展部1.负责完成公司市场销售.市场拓展.费用控制等年度目标任务,并负责将目标责任制分解落实,确保各项工作目标得以实现.2.对营销政策.市场及同业营销动态等方面进行调研分析,及时调整营销策略和计划 ...
- Python--day38--多进程的方法属性总结
多进程的方法属性:
- P1046 阶乘
题目描述 给你一个数N,求 \(N!\) (即:N的阶乘).\(N! = N \times (N-1) \times \dots \times 2 \times 1\) 输入格式 输入一个整数 \(N ...
- 深度学习——CNN
整理自: https://blog.csdn.net/woaidapaopao/article/details/77806273?locationnum=9&fps=1 思想 filter尺寸 ...
- Spark in action Spark 以及SparkR的安装配置说明
Spark以及SparkR的安装(standalone模式) From :ssdutsu @ Inspur Company suzhiyuan2006@gmail.com 操作系统 CentOS 7 ...
- 2019-3-8-为何使用-DirectComposition
title author date CreateTime categories 为何使用 DirectComposition lindexi 2019-3-8 8:56:9 +0800 2018-04 ...
- 一个简单的Web服务器-支持Servlet请求
上接 一个简单的Web服务器-支持静态资源请求,这个服务器可以处理静态资源的请求,那么如何处理Servlet请求的呢? 判断是否是Servlet请求 首先Web服务器需要判断当前请求是否是Servle ...
- Servlet request 面试题
使用request获得请求行:String getmethod():获得请求的资源:String getcontextpath():----web应用名称request是一个域对象request完成请 ...
- 35.python之事件驱动模型
转载:https://www.cnblogs.com/yuanchenqi/articles/5722574.html 事件驱动模型 上节的问题: 协程:遇到IO操作就切换. 但什么时候切回去呢?怎么 ...