正值中秋佳节，中秋是家人团聚的时刻，家人团聚的时候最喜欢在庭院里，一起赏月吃月饼，我们今天就用CSS实现一个发光月亮吧
效果图
这个月亮看起来感觉还蛮可爱的
页面结构
我们进行划分区域，有一个id为app的大盒子作为整体区域，
moon类名盒子作为月亮体，承载了了月亮的所有部分主要是为了防止变形
<div id="app"> <!-- 月亮 --> <div class="moon"> <!-- 眼睛 --> <ul class="eye"> <li></li> <li></li> </ul> <!-- 嘴巴 --> <div class="mouth"></div> <!-- 酒窝 --> <ul class="dimple"> <li></li> <li></li> </ul> <!-- 左胳膊 --> <div class="left_hand"></div> <!-- 右胳膊 --> <div class="right_hand"></div> <!-- 左小手 --> <ul class="left_finger"> <li></li> <li></li> <li></li> </ul> <!-- 右小手 --> <ul class="right_finger"> <li></li> <li></li> <li></li> </ul> </div> </div>
样式实现
首先清除一下所有的默认样式和让
#app盒子通过css单位占满全屏在给一个背景色，同时声明一个css的变量，变量值为月亮的主题颜色
* { margin: 0; padding: 0; list-style: none; } #app { width: 100vw; height: 100vh; background: #000; --bgColor: #fee786; }
月亮体的实现
我们通过固定定位的方式定位到页面的水平居中位置，在距离上面有一定的距离，通过css的
var关键字结合背景属性给上背景色，在通过border-radius属性将月亮整体设置为圆形
/* 月亮 */ .moon { width: 300px; height: 300px; position: fixed; top:200px; left: 50%; transform: translate(-50%, -50%); background: var(--bgColor); border-radius: 50%; }
月亮眼睛的实现
眼睛大盒子我们通过无序列表结合flex布局的方式进行实现，在通过定位放到合适的位置，眼睛高度设置为宽度的一半，在通过css的
border-radius使得形成一个半圆状，在通过设置边框大小和颜色就可以了
/* 眼睛 */ .eye { position: absolute; top: 100px; left: 50%; transform: translate(-50%); display: flex; justify-content: space-between; align-items: center; width: 200px; } .eye li { width: 40px; height: 20px; border-radius: 0 0 40px 40px; border-bottom: 3px solid #000; border-left: 3px solid #000; border-right: 3px solid #000; }
月亮嘴巴的实现
嘴巴这里使用到了css中的
clip属性，他是用于剪裁，必须和定位属性结合使用，我们设置好边框之后在进行剪裁就可以得出嘴巴的形状
/* 嘴巴 */ .mouth { position: absolute; top: 200px; left: 50%; transform: translate(-50%); width: 40px; height: 20px; border-radius: 50%; clip: rect(12px auto auto 0); border: 3px solid #000; }
月亮酒窝的实现
酒窝大盒子这里我们依旧使用无序列表进行实现，通过flex布局结合定位，在给每一个小酒窝设置宽高背景颜色，通过
border-radius设置为圆形即可
/* 酒窝 */ .dimple { width: 200px; position: absolute; top: 150px; left: 50%; transform: translate(-50%); display: flex; justify-content: space-between; align-items: center; } .dimple li { width: 30px; height: 30px; border-radius: 50%; background: #f9b10d; }
月亮左右胳膊的实现
月亮左右胳膊的实现，这里也是用到了css的
clip属性，先将月亮左右胳膊设置为椭圆，使用定位和旋转属性挪到合适的位置，最后通过clip剪裁出一个胳膊的样子
/*胳膊 */ .left_hand, .right_hand { width: 150px; height: 80px; position: absolute; top: 200px; clip: rect(0 auto 20px 0); border-radius: 50%; border: 5px solid var(--bgColor); } .left_hand { top: 200px; left: -80px; transform: rotate(-51deg); } .right_hand { left: 217px; transform: rotate(51deg); }
月亮小手实现
我们这里使用无序列表给里面子盒子设置为手指的样式，然后通过css旋转出一个小手的模样，在通过定位以及旋转挪到合适的位置
/* 小手 */ .left_finger, .right_finger { position: absolute; } .left_finger { top: 274px; left: -70px; transform: rotate(-83deg); } .right_finger { top: 276px; left: 345px; transform: rotate(-81deg); } .left_finger li, .right_finger li { width: 20px; height: 5px; border-radius: 50%; background: var(--bgColor); } .left_finger li:nth-child(1), .right_finger li:nth-child(1) { transform: rotate(20deg); } .left_finger li:nth-child(2), .right_finger li:nth-child(2) { transform: rotate(0deg); } .left_finger li:nth-child(3), .right_finger li:nth-child(3) { transform: rotate(-20deg); }
发光特效实现
我们定义一个css动画，这里用到了css属性
filter中的drop-shadow,通过实现给元素实现一个发光的效果，在动画的初始和运动到正中间以及结束给drop-shadow定义不同的值实现闪烁的效果
@keyframes luminescence { 0% { filter: drop-shadow(0px 0px 5px var(--bgColor)); } 50% { filter: drop-shadow(0px 0px 25px var(--bgColor)); } 100% { filter: drop-shadow(0px 0px 5px var(--bgColor)); } }
我们把动画添加到月亮主体盒子上且设置无限循环
/* 月亮 */ .moon { animation: luminescence 1s linear infinite; }
代码我已经放到码上掘金了，感兴趣的大家可以看一下！
坚持努力，无惧未来！
