79.纯 CSS 创作单元素麦当劳金拱门 Logo（自创）

效果地址：https://scrimba.com/c/cN3P6nfr

原理：两个椭圆，颜色部分为边框，下一半被伪元素覆盖。

感想：看了一眼大神的，代码比我的还少，得研究研究去。

HTML code：

<!-- 定义一个main容器 -->
<div class="main"><div class="left"></div><div class="right"></div>
</div>

CSS code：

html, body {margin: 0;padding: 0;
}
body{height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #400;font-size: 20px;
}
.main{width: 12em;height: 12em;   /* border: 1px solid white; */background-color: red;display: flex;justify-content: center;position: relative;overflow: hidden;
}
.left{box-sizing: border-box;width: 6em;height: 12em;border-radius: 50%;background-color: withe;border-width: 0.7em 1.4em;border-style: solid;border-color:yellow;position: absolute;top: 3em;left: 0.7em;
}
.right{box-sizing: border-box;width: 6em;height: 12em;border-radius: 50%;background-color: withe;border-width: 0.7em 1.4em;border-style: solid;border-color:yellow;position: absolute;top: 3em;right: 0.7em;
}
.main::before{content: '';position: absolute;width: 12em;height: 6em;/* border: 1px solid white;*/background-color: red;top: 9em;z-index: 999;
}
.main::after{content: '';position: absolute;width: 6em;height: 6em;/* border: 1px solid white;*/background-color: red;top: 8.5em;z-index: 999;
}

posted on 2019-06-23 23:43 人生与戏阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/FlyingLiao/p/11074936.html

79.纯 CSS 创作单元素麦当劳金拱门 Logo（自创）相关推荐

79.纯 CSS 创作单元素麦当劳金拱门 Logo（原文）
79.纯 CSS 创作单元素麦当劳金拱门 Logo(原文) 1. 效果图: 效果地址:https://codepen.io/flyingliao/pen/JgavjX 原理:m是伪元素::before ...
如何实现尺子样式html,纯CSS实现单元素构建的刻度尺
CSS 语言: CSSSCSS 确定 html { background: silver; } .ruler { margin: 2em auto; border: solid 1px #efd7a1 ...
22.纯 CSS 创作出美丽的彩虹条纹文字
22.纯 CSS 创作出美丽的彩虹条纹文字原文地址:https://segmentfault.com/a/1190000014858628 感想: 利用四个span的::before 和 ::aft ...
26.纯 CSS创作按钮被从纸上掀起的立体效果
26.纯 CSS创作按钮被从纸上掀起的立体效果原文地址:https://segmentfault.com/a/1190000014930183 感想:主要2D和3D转换.阴影效果. HTML代码: ...
如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效
39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效原文地址:https://segmentfault.com/a/1190000015126240 HTML code: <div cl ...
73.纯 CSS 创作一只卡通狐狸
73.纯 CSS 创作一只卡通狐狸原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6E ...
24.纯 CSS 创作出平滑的层叠海浪特效
24.纯 CSS 创作出平滑的层叠海浪特效原文地址:https://segmentfault.com/a/1190000014895634 感想:这里的波浪只是侧面的,利用几个平面一部分弧旋转得到. ...
4. 纯 CSS 创作一个金属光泽 3D 按钮特效
4. 纯 CSS 创作一个金属光泽 3D 按钮特效原文地址:https://segmentfault.com/a/1190000014599280 HTML代码: <div class=&qu ...

79.纯 CSS 创作单元素麦当劳金拱门 Logo（自创）

79.纯 CSS 创作单元素麦当劳金拱门 Logo（自创）相关推荐

最新文章

热门文章