如何用纯 CSS 绘制一个充满动感的 Vue logo

末蓝、 2022-04-14 02:47 654阅读 0赞

![1504257-20181123141024274-1339330970.png][]

## 效果预览 ##

[在线演示][Link 1]

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

[https://codepen.io/comehope/pen/zaqKPx][https_codepen.io_comehope_pen_zaqKPx]

## 可交互视频教程 ##

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

[https://scrimba.com/p/pEgDAM/cw9WzuV][https_scrimba.com_p_pEgDAM_cw9WzuV]

## 源代码下载 ##

[本地下载][Link 2]

每日前端实战系列的全部源代码请从 github 下载：

[https://github.com/comehope/front-end-daily-challenges][https_github.com_comehope_front-end-daily-challenges]

## 代码解读 ##

定义 dom，一个容器中包含 3 个子元素：

居中显示：

body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: 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 {
        width: var(--outer-w);
        height: var(--outer-h);
        font-size: 8px;
    }

画出 3 层三角形：

.vue {
        position: relative;
        display: flex;
        justify-content: center;
    }
    
    .outer,
    .medium,
    .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);
    }
    
    .outer {
        --w: var(--outer-w);
        --h: var(--outer-h);
        --c: #42b883; /* aragon green */
    }
    
    .middle {
        --w: var(--middle-w);
        --h: var(--middle-h);
        --c: #35495e;  /* derk denim */
    }
    
    .inner {
        --w: var(--inner-w);
        --h: var(--inner-h);
        --c: white;
    }

定义动画效果：

.outer,
    .middle,
    .inner {
        animation: animate 3s in ease-out infinite;
    }
    
    .middle {
        animation-delay: 0.1s;
    }
    
    .inner {
        animation-delay: 0.2s;
    }
    
    @keyframes animate {
        0%, 5% {
            top: -100%;
        }
    
        15%, 80% {
            top: 0;
            filter: opacity(1);
            transform: scale(1);
        }
    
        90%, 100% {
            top: 100%;
            filter: opacity(0);
            transform: scale(0);
        }
    }

最后，隐藏容器外的内容：

.vue {
        overflow: hidden;
    }

大功告成！

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

[1504257-20181123141024274-1339330970.png]: /images/20220414/98e9b1a87b544818a8c4b0730c2d5af5.png
[Link 1]: https://www.jqhtml.com/yanshi?demourl=%2Fwp-content%2Fuploads%2F2018%2F11%2Ffront-end-daily-challenges-master%2F043-vue-logo&demotitle=%E7%BA%AF%20CSS%20%E7%BB%98%E5%88%B6%E4%B8%80%E4%B8%AA%E5%85%85%E6%BB%A1%E5%8A%A8%E6%84%9F%E7%9A%84%20Vue%20logo
[https_codepen.io_comehope_pen_zaqKPx]: https://codepen.io/comehope/pen/zaqKPx
[https_scrimba.com_p_pEgDAM_cw9WzuV]: https://scrimba.com/p/pEgDAM/cw9WzuV
[Link 2]: http://www.jqhtml.com/19322.html
[https_github.com_comehope_front-end-daily-challenges]: https://github.com/comehope/front-end-daily-challenges