原文地址：https://segmentfault.com/a/1190000015070543
感想： 动画，背景颜色
HTML code:
<div class="sky">
<div class="sun"></div>
<div class="moon"></div>
</div>
CSS code:
html, body {
margin:;
padding:;
}
.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);
}
}
