我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
从小到大，我们听过很多的神话故事，例如：精卫填海、夸父追日、女娲补天等。这些故事无论真假，或多或少都给我们带来了一些有益的启示。
今天，本帅哥要给大家介绍的是后羿奔月
背景故事
相传在远古的时候，天上突然出现了十个太阳，晒得大地直冒烟，老百姓实在无法生活下去了。
有一个力大无比的英雄名叫后羿，他决心为老百姓解除这个苦难。后羿登上昆仑山顶，运足气力，拉满神弓，“嗖——嗖——嗖——”一口气射下九个太阳。他对天上最后一个太阳说：“从今以后，你每天必须按时升起，按时落下，为民造福。”
后羿为老百姓除了害，大伙儿都很敬重他。很多人拜他为师，跟他学习武艺。有个叫逄蒙的人，为人奸诈贪婪，也随着众人拜在后羿的门下。
后羿的妻子嫦娥（原名：姮娥），是个美丽善良的女子。她经常接济生活贫苦的乡亲，乡亲们都非常喜欢她。一天，昆仑山上的西王母送给后羿一丸仙药。据说，人吃了这种药，不但能长生不老，还可以升天成仙哩。可是，后羿不愿意离开嫦娥，就让她将仙药藏在百宝匣里。
这件事不知怎么被逄蒙知道了，他一心想把后羿的仙药弄到手。八月十五这天清晨，后羿要带弟子出门去，逄蒙假装生病，留了下来。到了晚上，逄蒙手提宝剑，迫不及待地闯进后羿家里，威逼嫦娥把仙药交出来。嫦娥心里想，让这样的人吃了长生不老药，不是要害更多的人吗。于是，她便机智地与逄蒙周旋。逄蒙见嫦娥不肯交出仙药，就翻箱倒柜，四处搜寻。眼看就要搜到百宝匣了，嫦娥疾步向前，取出仙药，一口吞了下去。
嫦娥吃了仙药，突然飘飘悠悠地飞了起来。她飞出了窗子，飞过了洒满银辉的郊野，越飞越高。碧蓝碧蓝的夜空挂着一轮明月，嫦娥一直朝着月亮飞去。
后羿外出回来，不见了妻子嫦娥。他焦急地冲出门外，只见皓月当空，圆圆的月亮上树影婆娑，一只玉兔在树下跳来跳去。啊，妻子正站在一棵桂树旁深情地凝望着自己呢。“嫦娥，嫦娥”后羿连声呼唤，不顾一切地朝着月亮追去。可是他向前追三步，月亮就向后退三步，怎么也追不上。
乡亲们很想念好心的嫦娥，在院子里摆上嫦娥平日爱吃的食品，遥遥地为她祝福。
从此以后，每年八月十五，就成了人们企盼团圆的中秋佳节。
于是我这个好心人帅哥，为了后羿的爱情，亲手把它送上月亮上
后羿奔月展示
代码介绍
html部分
- HTML结构
<div class="ya1"><img src="https://s2.loli.net/2022/09/17/vSmqiAKRuzcLWIU.png" width="300"></div>
<div class="moon1"></div>
<section>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</section>
css部分
1.清楚内边距
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
2.设置body的背景颜色
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(106, 105, 105);
background: radial-gradient(150% 95% at bottom center, rgb(67, 19, 122) 20%, rgb(6, 6, 70) 55%, rgb(7, 7, 70) 70%, rgb(18, 2, 56) 85%, rgb(5, 1, 22) 100%);
}
3.设置流星，在section写多个span，定位，固定到上方，animation动画使流星下降
section {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-position: center;
background-size: cover;
}
span {
position: absolute;
width: 4px;
height: 4px;
background-color: #fff;
top: 50%;
left: 50%;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1),
0 0 0 0px rgba(255, 255, 255, 0.1),
0 0 20px rgba(255, 255, 255, 1), ;
animation: animate 3s linear infinite;
}
span::before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 300px;
height: 1px;
background: linear-gradient(90deg, #fff, transparent);
}
@keyframes animate {
0% {
transform: rotate(315deg) translateX(0);
opacity: 1;
}
70% {
opacity: 1;
}
100% {
transform: rotate(315deg) translateX(-1000px);
opacity: 0;
}
}
span:nth-child(1) {
top: 0;
right: 0;
animation-delay: 0;
animation-duration: 1s;
}
span:nth-child(2) {
top: 0;
right: 80px;
left: initial;
animation-delay: 0.2s;
animation-duration: 3s;
}
span:nth-child(3) {
top: 80px;
right: 0px;
left: initial;
animation-delay: 0.4s;
animation-duration: 2s;
}
span:nth-child(4) {
top: 0px;
right: 180px;
animation-delay: 0.6s;
animation-duration: 1.5s;
}
span:nth-child(5) {
top: 0;
right: 400px;
left: initial;
animation-delay: 0.8s;
animation-duration: 2.5s;
}
span:nth-child(6) {
top: 0;
right: 600px;
left: initial;
animation-delay: 1;
animation-duration: 3s;
}
span:nth-child(7) {
top: 300px;
right: 0px;
left: initial;
animation-delay: 1.2s;
animation-duration: 1.75s;
}
span:nth-child(8) {
top: 0px;
right: 700px;
left: initial;
animation-delay: 1.4s;
animation-duration: 1.75s;
}
span:nth-child(9) {
top: 0px;
right: 1000px;
left: initial;
animation-delay: 0.75s;
animation-duration: 2.25s;
}
span:nth-child(10) {
top: 0px;
right: 450px;
left: initial;
animation-delay: 2.75s;
animation-duration: 2.25s;
}
4.设置月亮样式
div {
margin-right: 30px;
}
.moon1 {
margin-left: 200px;
margin-top: -480px;
width: 8em;
height: 8em;
border-radius: 50%;
background-color: rgb(251, 255, 0);
box-shadow: 0 0 20px white;
animation: move 3s linear infinite;
}
@keyframes move {
0% {
width: 8em;
height: 8em;
}
50% {
width: 10em;
height: 10em;
}
100% {
width: 8em;
height: 8em;
}
}
5.最后一步了，就是把后羿旋转一下
.ya1 {
width: 500px;
height: 500px;
overflow: hidden;
margin-top: 250px;
transform: rotateZ(-10deg);
}
