我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!
正值中秋佳节,中秋是家人团聚的时刻,家人团聚的时候最喜欢在庭院里,一起赏月吃月饼,我们今天就用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;
}
代码我已经放到码上掘金了,感兴趣的大家可以看一下!
坚持努力,无惧未来!