原文地址：https://segmentfault.com/a/1190000015070543
感想： 动画，背景颜色
HTML code:
<div class="sky"> ???<div class="sun"></div> ???<div class="moon"></div></div>
CSS code:
html, body { ???margin: 0; ???padding: 0;}.sky{ ???position: relative; ???width: 100vw; ???height: 100vh; ???/* 让子元素垂直居中 */ ???display: flex; ???justify-content: center; ???align-items: center; ???background-color: skyblue; ???animation: animate-sky 10s linear infinite; ???/* 隐藏滚动条 */ ???overflow: hidden;}/* 太阳与月亮共同点 */.sun,.moon{ ???position: absolute; ???width: 50vmin; ???height: 50vmin; ???border-radius: 50%; ???animation: 10s linear infinite;}/* 太阳 */.sun{ ???background-color: gold; ???animation-name: animate-sun;}/* 月亮 */.moon{ ???background-color: slategray; ???animation-name: animate-moon; ??/* ?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); ???}}36纯 CSS 动画原理，在页面上表现日蚀现象
原文地址：https://www.cnblogs.com/FlyingLiao/p/10389110.html