前端日常实战：36#视频演示如何利用CSS动画原理在页面展示日食现象
时间：2023-04-04 23:09:14
HTML5
效果预览。按右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/OELvrK交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cgnzMAz源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，一个名为sky的容器，其中包含一个sun元素和一个moon元素：
绘制天空：body{margin:0;}.sky{width:100vw;高度：100vh；background-color:skyblue;}绘制太阳：.sky{display:flex;对齐项目：居中；证明内容：居中；位置：相对；}.sun{位置：绝对；宽度：50vmin；高度：50vmin；边界半径：50%；background-color:gold;}画月亮:.moon{position:absolute;宽度：50vmin；高度：50vmin；边界半径：50%；背景颜色：石板灰色；transform:translateX(-55vmin);}定义天空的变化，当日食来临时，天空会变黑：@keyframesanimate-sky{50%{background-color:black;}}定义太阳的变化。当日食来临时，虽然太阳会被挡住，但光晕还是会透出来：@keyframesanimate-sun{50%{box-shadow:005em1emwhite;}}定义月亮的动画。当它移动到与太阳重叠的位置时，因为没有光，所以看不到它的颜色：@keyframesanimate-moon{from{transform:translateX(-100vmin);}50%{背景颜色：黑色；}到{转换：translateX(100vmin);}}将动画应用于元素：.sky,.sun,.moon{animation:10slinearinfinite;}.sky{animation-name:animate-sky;}.sun{animation-name:animate-sun;}.moon{animation-name:animate-moon;}最后，隐藏滚动条：.sky{overflow:hidden;}就大功告成了！
