俗话说:"十五的月亮十六圆",今天和家人们赏月的时候，看到月亮在水面上的倒影，我就想能否通过CSS实现呢，今天我们来实现一下吧
效果图
页面结构
我们这里用一个大盒子包起来，然后使用里面有一个类名为
inverted盒子主要用于展示月亮倒影的，还有一个类名为moon的盒子用于设置月亮样式的
<div id="app"> <!-- 倒影盒子 --> <div class="inverted"> <!-- 发光月亮 --> <div class="moon"></div> </div> </div>
初始样式
我们先清除默认的外边距，内边距，以及设置好所有的盒子为标准盒模型
* { margin: 0; padding: 0; box-sizing: border-box; }
在进行设置id名为
app盒子的样式，我们将他设置为占满全屏的宽高在给上背景色，这样可以更好的看出月亮和月亮的倒影
#app { width: 100vw; height: 100vh; background: #000; display: flex; justify-content: center; padding-top: 100px; }
月亮实现
月亮设置好宽高，通过css属性设置为圆形，然后我们再给他设置一个发光的动画且匀速发光无限循环
.moon { width: 200px; height: 200px; background: #F2D06D; border-radius: 50%; animation: shine 2s linear infinite; }
月亮发光动画我们这里使用css属性
box-shadow进行实现，通过该属性控制边框的阴影的虚化距离
@keyframes shine { 0% { box-shadow: 0px 0px 10px 0px #d6ecf0; } 50% { box-shadow: 0px 0px 40px 0px #d6ecf0; } 100% { box-shadow: 0px 0px 10px 0px #d6ecf0; } }
月亮倒影实现
月亮倒影我们这里采用css的倒影属性
box-reflect进行实现，我们可以通过该属性将该盒子内容映射到盒子下方显示且通过背景属性设置出一个逐渐消失的效果，我们这里给这个属性加上常见的浏览器前缀做下兼容
.inverted { width: 250px; height:250px; display: flex; justify-content: center; align-items: center; -webkit-box-reflect: below -20px linear-gradient(transparent, 70%, #000); -moz-box-reflect: below -20px linear-gradient(transparent, 70%, #000); -o-box-reflect: below -20px linear-gradient(transparent, 70%, #000); }
代码我已经放到码上掘金上了，感兴趣的大家可以看一下！
