zoukankan      html  css  js  c++  java
  • 43.纯 CSS 绘制一个充满动感的 Vue logo

    原文地址:https://segmentfault.com/a/1190000015177284

    感想: 又有点回到boder的三角形

    HTML code:

    <div class="vue">
      <span class="outer"></span>
      <span class="middle"></span>
      <span class="inner"></span>
    </div>

    CSS code:

    /* 系统默认font-size: 12px; 此值只能调大,不能再小 */
    html,body{
        margin: 0;
        padding: 0;
    } 
    body{
        font-size: 6px;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: radial-gradient(circle at center, lightgreen, white);
    }
    /* 定义3层三角形的尺寸 */
    :root{
        --outer-w: 49em;
        --outer-h: 40em;
        --middle-w: 32em;
        --middle-h: 26em;
        --inner-w: 16em;
        --inner-h: 13em;
    }
    .vue{
        font-size: 6px;
        width: var(--outer-w);
        height: var(--outer-h);
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-start;/* 这是默认的 */
        overflow: hidden;
    }
    .outer{
        --w: var(--outer-w);
        --h: var(--outer-h);
        --c: #42b883;
    }
    .vue .outer,
    .vue .middle,
    .vue .inner{
        position: absolute;
        border-style: solid;
        border-color: transparent;
        border-top-width: var(--h);
        border-top-color: var(--c);
        border-left-width: calc(var(--w ) / 2);
        border-right-width: calc(var(--w) / 2);
        animation: in-and-out 3s linear infinite;
    }
    .vue .middle{
        --w: var(--middle-w);
        --h: var(--middle-h);
        --c: #35495e;
        animation-delay: 0.1s;
    }
    .vue .inner{
        --w: var(--inner-w);
        --h: var(--inner-h);
        --c: white;
        animation-delay: 0.2s;
    }
    @keyframes in-and-out{
        0%, 5%{
            top: -100%;
        }
        15%, 80%{
            top: 0;
            filter: opacity(1);
            transform: scale(1);
        }
        90%, 100%{
            top: 100%;
            filter: opacity(0);
            transform: scale(0);
        }
    }
  • 相关阅读:
    java的异常
    Quartz使用总结
    MYSQL性能优化的最佳20+条经验
    索引原理和慢查询优化
    MySQL索引背后的数据结构及算法原理
    常见电商项目的数据库表设计(MySQL版)
    常见试题和算法
    mysql性能调优与架构设计笔记
    MYSQL数据库设计规范与原则
    复合索引的优点和注意事项
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10445930.html
Copyright © 2011-2022 走看看