如何用純 CSS 繪製一個充滿動感的 Vue logo
阿新 • • 發佈:2018-11-24
效果預覽
線上演示按下右側的“點選預覽”按鈕可以在當前頁面預覽,點選連結可以全屏預覽。
https://codepen.io/comehope/pen/zaqKPx
可互動視訊教程
此視訊是可以互動的,你可以隨時暫停視訊,編輯視訊中的程式碼。
請用 chrome, safari, edge 開啟觀看。
https://scrimba.com/p/pEgDAM/cw9WzuV
原始碼下載
本地下載每日前端實戰系列的全部原始碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
程式碼解讀
定義 dom,一個容器中包含 3 個子元素:
<div class="vue">
<span class="outer"></span>
<span class="middle"></span>
<span class="inner"></span>
</div>
居中顯示:
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