前端日常实践：43#视频演示如何用纯CSS绘制动态Vue标志
时间：2023-03-30 17:54:46
CSS
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/zaqKPx交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cw9WzuV源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，一个容器包含3个子元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:radial-gradient(circleatcenter,lightgreen,white);}定义三层三角形的尺寸：:root{--outer-w:49em;--outer-h:40em;--middle-w:32em;--middle-h:26em;--inner-w:16em;--inner-h:13em;}定义容器的大小:.vue{width:var(--outer-w);高度：var(--outer-h);font-size:8px;}画三层三角形:.vue{position:relative;显示：弹性；证明内容：居中；}.outer,.medium,.inner{position:absolute;边框样式：实心；边框颜色：透明；border-top-width:var(--h);边框顶部列或者：var(--c);border-left-width:calc(var(--w)/2);border-right-width:calc(var(--w)/2);}.outer{--w:var(--outer-w);--h:var(--外-h);--c:#42b883;/*阿拉贡绿*/}.middle{--w:var(--middle-w);--h:var(--middle-h);--c:#35495e;/*derkdenim*/}.inner{--w:var(--inner-w);--h:var(--内-h);--c:white;}定义动画效果:.outer,.middle,.inner{animation:animate3sinease-outinfinite;}.middle{animation-delay:0.1s;}.inner{animation-delay:0.2s;}@keyframes动画{0%,5%{top:-100%;}15%,80%{顶部:0;过滤器：不透明度（1）；变换：规模（1）；}90%,100%{顶部:100%;过滤器：不透明度（0）；变换：比例（0）；}}最后，将内容隐藏到容器外：.vue{overflow:hidden;}就大功告成了！
