43.纯 CSS 绘制一个充满动感的 Vue logo-优快云博客

本文介绍如何仅使用CSS创建一个动态的Vuelogo，通过调整不同层级的三角形尺寸和动画效果，实现logo的生动展示。代码中详细展示了HTML结构与CSS样式设置，包括径向渐变背景和动画关键帧。

原文地址：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);
    }
}