<div class="vue">

  <span class="outer"></span>

  <span class="middle"></span>

  <span class="inner"></span>

</div>

/* 系统默认font-size: 12px; 此值只能调大，不能再小 */

html,body{

    margin:;

    padding:;

}

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:;

        filter: opacity(1);

        transform: scale(1);

    }

    90%, 100%{

        top: 100%;

        filter: opacity(0);

        transform: scale(0);

    }

}