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