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;
    }
  • 相关阅读:
    html5的离线缓存
    html5的本地存储
    html5的地理位置定位
    html5新添加的表单类型和属性
    html5的鼠标拖拽
    win下svn常用操作笔记
    git常用命令笔记
    centos7下NFS使用与配置
    centos7下mysql5.6的主从复制
    centos7下创建mysql5.6多实例
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/11074936.html
Copyright © 2011-2022 走看看