前端日常实践：55#视频演示如何用纯CSS制作太阳、地球、月亮模型
时间：2023-04-05 19:52:51
HTML5
效果预览点击右侧“点击预览”按钮在当前页面进行预览，并单击链接以全屏预览。https://codepen.io/comehop??e/pen/RJjQYY互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cLQLyTR源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含3个元素：
/div> 居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器尺寸：.container{font-size:10px;宽度：40em；高度：40em；position:relative;}画太阳:.sun{position:absolute;顶部：15em；左：15em；宽度：10em；高度：10em；背景色：黄色；边界半径：50%；box-shadow:003emwhite;}绘制地球和月亮的轨迹：.earth,.moon{position:absolute;边框样式：实心；border-color:whitetransparent透明透明;边框宽度：0.1em0.1em00；border-radius:50%;}.earth{top:5em;左：5em；宽度：30em；高度：30em;}.moon{top:0;右：0；宽度：8em；height:8em;}用伪元素绘制地球和月亮：.earth::before,.moon::before{position:absolute;边界半径：50%；内容：'';}.earth::before{top:2.8em;右：2.5em；高度：3em；宽度：3em；背景颜色：aqua;}.moon::before{top:0.8em;右：0.2em；宽度：1.2em；高度：1.2em；background-color:silver;}设置旋转动画效果：/*旋转周期365.2422天*/.earth{animation:orbit36??.5slinearinfinite;}/*旋转周期27.322天*/.moon{animation:orbit2.7slinearinfinite;}@keyframesorbit{to{transform:rotate(360deg);}}最后可能会出现hide容器外的部分：body{overflow:hidden;}就大功告成了！
