79.纯 CSS 创作单元素麦当劳金拱门 Logo（自创）
效果地址：/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 -06-23 23:43 人生与戏 阅读(...) 评论(...) 编辑 收藏
