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;
    }
  • 相关阅读:
    Python常见的几种算法
    Python的八种数据类型
    网络协议
    Python基本知识
    Python简介
    Windows10 java环境配置
    linux 为动态分配的Virtualbox虚拟硬盘扩容
    ubuntu 18.04.1安装hadoop3.1.2
    linux 安装virtualbox5.2
    这是写给我自己看的!!
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/11074936.html
Copyright © 2011-2022 走看看