原文地址：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); }}