如何利用 CSS 動畫原理,在頁面上表現日蝕現象
阿新 • • 發佈:2018-11-24
效果預覽
線上演示按下右側的“點選預覽”按鈕可以在當前頁面預覽,點選連結可以全屏預覽。
https://codepen.io/comehope/pen/OELvrK
可互動視訊教程
此視訊是可以互動的,你可以隨時暫停視訊,編輯視訊中的程式碼。
請用 chrome, safari, edge 開啟觀看。
https://scrimba.com/p/pEgDAM/cgnzMAz
原始碼下載
本地下載每日前端實戰系列的全部原始碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
程式碼解讀
定義 dom,一個名為 sky 的容器,其中包含一個 sun 元素和一個 moon 元素:
<div class="sky">
<div class="sun"></div>
<div class="moon"></div>
</div>
畫出天空:
body { margin: 0; } .sky { width: 100vw; height: 100vh; background-color: skyblue; }
畫出太陽:
.sky {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.sun {
position: absolute;
width: 50vmin;
height: 50vmin;
border-radius: 50%;
background-color: gold;
}
畫出月亮:
.moon { position: absolute; width: 50vmin; height: 50vmin; border-radius: 50%; background-color: slategray; transform: translateX(-55vmin); }
定義天空的變化,當日蝕來臨時天空會變黑:
@keyframes animate-sky {
50% {
background-color: black;
}
}
定義太陽的變化,當日蝕來臨時太陽雖會被遮擋,但光暈仍會透出:
@keyframes animate-sun {
50% {
box-shadow: 0 0 5em 1em white;
}
}
定義月亮的動畫,當它運動到和太陽重疊的位置時,因為沒有光,就看不到它的顏色了:
@keyframes animate-moon {
from {
transform: translateX(-100vmin);
}
50% {
background-color: black;
}
to {
transform: translateX(100vmin);
}
}
把動畫應用到元素上:
.sky,
.sun,
.moon {
animation: 10s linear infinite;
}
.sky {
animation-name: animate-sky;
}
.sun {
animation-name: animate-sun;
}
.moon {
animation-name: animate-moon;
}
最後,隱藏滾動條:
.sky {
overflow: hidden;
}
大功告成!
原文地址:https://segmentfault.com/a/1190000015070543