八月十五月正圆,中秋佳节万家欢,吴刚捧出桂花酒,嫦娥蟾宫舞蹁跹。家乡的月亮分外圆,团聚的月饼香又甜,重逢的日子比蜜甜。说起农历八月十五的中秋佳节,大家都想到了象征美好团圆的月饼。佳节话经典,今天我就就跟大家细数下流传最广的中秋节经典传说故事,感恩中秋,怀念先人!
嫦娥奔月
相传,嫦娥偷吃了丈夫后羿从西王母那儿讨来的不死之药后,飞到月宫。但琼楼玉宇,高处不胜寒,所谓“嫦娥应悔偷灵药,碧海青天夜夜心”,正是她倍感孤寂之心情的写照。后来,嫦娥向丈夫倾诉懊悔说:“明天乃月圆之候,你用面粉作丸,团团如圆月形状,放在屋子的西北方向,然后再连续呼唤我的名字。三更时分,我就可以回家来了。”翌日,照妻子的吩咐去做,届时嫦娥果由月中飞来,夫妻重圆。中秋节做月饼供嫦娥的风俗,也是由此形成。
接下来小编就制作一副嫦娥奔月供大家欣赏,稍微有点简略,将就将就吧。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
height: 1000px;
/* 设置背景图片 */
background-image: url(./img/R-C.jpg);
background-repeat: no-repeat;
background-size: cover;
}
img{
width: 200px;
height: 200px;
position: absolute;
right: 0;
bottom: 0;
/* 运用动画 */
animation: move 5s linear forwards;
opacity: .5;
}
/* 设置动画 */
@keyframes move{
25%{
transform: translate(-200px,-200px) rotate(60deg);
opacity: .9;
}
50%{
transform: translate(-500px,-400px) rotate(30deg);
opacity: .5;
}
75%{
transform: translate(-800px,-600px) rotate(60deg);
opacity: .9;
}
100%{
transform: translate(-1200px,-700px) rotate(0deg);
opacity: 1;
}
}
</style>
<body>
<div>
<img src="./img/R-C.png" alt="">
</div>
</body>
</html>
小编用的思想是设置一个背景图片,一个图片设置动画,让嫦娥的这张图图片产生一个动画的效果,让她飞向月亮的一个效果,让他实现嫦娥奔月的效果。
效果如图所示:
QQ录屏20220909094354
小编在这里祝愿大家一轮明月,思念无限﹔一块月饼,合家团圆﹔一声关怀,心心相牵﹔一份相牵,情谊相连﹔一个拥抱,感恩言谢﹔一路走来,你在身边﹔一起努力,美好明天!愿中秋节节日快乐!程序员也要好好休息哦!