我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
中秋
中秋虽然已经过去一个多礼拜了，但为了不让这个中秋白过，想了想还是需要留下点什么，正好今年中秋的月亮是又大又圆，那么就让我们一起来看月亮吧🌛！
先看一下高清实景拍摄的月亮吧！
高清拍摄的月亮是真的漂亮，但是光一个静态月亮看起来太孤单了，接下来我们用代码来让这个月亮动起来吧，可以先看一下最终实现的效果，如图：
怎么样，上面的效果看起来是不是还不错？那么还等什么呢，让我们一起开始吧！
月亮
首先我们需要将月亮的图像显示在页面上，并且还需要添加一个星空背景图，这样月亮才不会显得突兀，相关的星空图在这里：
背景图已经有了，那么我们就开始 html 布局吧，代码很简单，让我们一起来看一下：
<div class="moon">
<div class="moon-rotate"></div>
</div>
仅仅只有两层 div 元素，就可以实现这个中秋星空月亮旋转效果，下面让我们一起来看一下 CSS 是如何实现的。
旋转的月亮
我们先来实现一下基础的 CSS 样式，相关代码如下：
* {margin: 0; padding: 0;}
body {
width: 100%;
height: 100vh;
background: url('https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/efd037fde6b4437295aef7119e12dc81~tplv-k3u1fbpfcp-watermark.image');
}
通过给 body 添加星空背景图，让星空占满整个屏幕，然后需要添加相关的月亮样式了，代码如下：
.moon {
width: 300px;
height: 300px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
overflow: hidden;
border-radius: 50%;
box-shadow: 0 0 200px 20px #000 inset, 0 0 20px 2px;
&::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-color: #000;
border-radius: 50%;
box-shadow: -40px -40px 50px 2px #000 inset;
}
.moon-rotate {
width: 200%;
height: 100%;
background: url('https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4f667dc4d28549f1b3d4ed3d24cd3395~tplv-k3u1fbpfcp-watermark.image') -100px center;
background-repeat: repeat-x;
background-size: cover;
}
}
我们给 moon 元素添加一个固定定位(fixed)，将整个月亮定位在屏幕的正中间位置，然后通过 div 里面的元素将月亮的图像展示出来，最终的效果如下图所示：
现在这个月亮还不能旋转，我们需要继续添加动画来让它动起来，其实动画效果也很简单，在前面的文章中介绍过动画相关的内容，这里就不展开了，我们一起来看一下相关的动画代码：
// ...other code
.moon-rotate {
// ...other code
animation: rotate 10s linear infinite;
}
@keyframes rotate {
to {
transform: translateX(-20%);
}
}
上述的动画很简单，就是不断的改变 X轴 左边的位置，让月亮看起来像在旋转一样，最终的实现效果在这里可以看到：
最后
俗话说，十五的月亮十六圆，但是今年的中秋，月亮在十五才是真的圆。通过给月亮添加相关的星空背景图以及旋转动画效果，让整个月亮看起来更好的好看。
最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家
