zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    android-6
    android-5
    android-购物商城
    安卓简易计算器
    安卓第四周作业
    安卓第一周作业
    第十五周作业
    第十三周作业
    第十三周上机练习
    第三次安卓作业
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/11074936.html
Copyright © 2011-2022 走看看