我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛”
中秋节一定因为种种原因不能回家团聚吧，小编也是中秋没回家还在半夜爆肝代码😂
一个人的中秋节，难免有些伤感。家人在时，会觉得此日同往常无异;只有当孤身一人，面对空荡荡的房间时，才深刻地觉出这当是一个多么喜庆欢腾的节日。愿珍惜眼前人，尽享团圆夜。
话不多说进入主题：
效果图，此处月亮和星星都是在动的：
第一步只需两个标签
<div class="box1">
<div class="moon"></div>
</div>
css样式
盒子定位和展示背景图
body {
background: rgb(42, 42, 54);
background-image: url('./下载.jpg');
background-size:500px 290px;
background-repeat: no-repeat;
background-position:580px 110px
}
.box1 {
width: 170px;
height: 170px;
position: relative;
margin: 250px auto;
}
星星样式
.moon {
width: 4px;
height: 4px;
margin-left: 0px;
background: #fff;
border-radius: 50%;
opacity: 1;
/*使用box-shadow画多个有黑有白的点*/
box-shadow: #fff 26px 7px 0 -1px,
rgba(255, 255, 255, 0.1) -36px -34px 0 -1px,
#fff 26px 7px 0 -1px,
rgba(255, 255, 255, 0.1) -16px -34px 0 -1px,
#fff 26px 7px 0 -1px,
rgba(255, 255, 255, 0.1) -56px -34px 0 -1px,
#fff 26px 7px 0 -1px,
rgba(255, 255, 255, 0.1) -96px -34px 0 -1px,
#fff 26px 7px 0 -1px,
rgba(255, 255, 255, 0.1) -116px -34px 0 -1px,
#fff 26px 7px 0 -1px,
rgba(255, 255, 255, 0.1) -156px -34px 0 -1px,
#fff 26px 7px 0 -1px,
rgba(255, 255, 255, 0.1) -6px -34px 0 -1px,
rgba(255, 255, 255, 0.1) -51px -34px 0 -1px,
#fff -52px -62px 0 -1px,
#fff 14px -37px,
rgba(255, 255, 255, 0.1) 41px -19px,
#fff 34px -50px,
rgba(255, 255, 255, 0.1) 14px -71px 0 -1px,
#fff 64px -21px 0 -1px,
rgba(255, 255, 255, 0.1) 32px -85px 0 -1px,
#fff 64px -90px,
rgba(255, 255, 255, 0.1) 60px -67px 0 -1px,
#fff 34px -127px,
rgba(255, 255, 255, 0.1) -26px -103px 0 -1px;
animation: moon_star 2.5s ease-in-out infinite;
}
星星的动画
@keyframes moon_star {/*将box-shadow画好的点，黑的变白的，白的变黑的，从而实现闪烁的效果 */
50% {
box-shadow: rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
#fff -36px -34px 0 -1px,
rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
#fff -16px -34px 0 -1px,
rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
#fff -56px -34px 0 -1px,
rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
#fff -96px -34px 0 -1px,
rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
#fff -116px -34px 0 -1px,
rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
#fff -156px -34px 0 -1px,
rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
#fff -6px -34px 0 -1px,
#fff -51px -34px 0 -1px,
rgba(255, 255, 255, 0.1) -52px -62px 0 -1px,
rgba(255, 255, 255, 0.1) 14px -37px,
#fff 41px -19px,
rgba(255, 255, 255, 0.1) 34px -50px,
#fff 14px -71px 0 -1px,
rgba(255, 255, 255, 0.1) 64px -21px 0 -1px,
#fff 32px -85px 0 -1px,
rgba(255, 255, 255, 0.1) 64px -90px,
#fff 60px -67px 0 -1px,
rgba(255, 255, 255, 0.1) 34px -127px,
#fff -26px -103px 0 -1px;
}
}
月亮的样式
.moon::after {
content: '';
width: 100px;
height: 100px;
position: absolute;
top: -106px;
border-radius: 50%;
box-shadow: yellow -100px 0;
animation: moon 5s ease-in-out infinite;
transform: rotate(-5deg);
transform-origin: 0 50%;
}
/*动画*/
@keyframes moon {
50% {
transform: rotate(10deg);
}
}
是不是很简单啊？你实现了吗
小编很乐意分享一些前端技巧给并跟大家交朋友哦，有什么不懂的都可以问我！
- 个人公众号：前端老实人，欢迎小伙伴加入大家庭一起学习啊
