原文地址：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); ???}}43.纯 CSS 绘制一个充满动感的 Vue logo
原文地址：https://www.cnblogs.com/FlyingLiao/p/10445930.html