原文地址: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); } }
原文地址:https://www.cnblogs.com/FlyingLiao/p/10445930.html
时间: 2024-10-08 14:05:22