中秋节——嫦娥奔月

八月十五月正圆,中秋佳节万家欢,吴刚捧出桂花酒,嫦娥蟾宫舞蹁跹。家乡的月亮分外圆,团聚的月饼香又甜,重逢的日子比蜜甜。说起农历八月十五的中秋佳节,大家都想到了象征美好团圆的月饼。佳节话经典,今天我就就跟大家细数下流传最广的中秋节经典传说故事,感恩中秋,怀念先人!

嫦娥奔月

  相传,嫦娥偷吃了丈夫后羿从西王母那儿讨来的不死之药后,飞到月宫。但琼楼玉宇,高处不胜寒,所谓“嫦娥应悔偷灵药,碧海青天夜夜心”,正是她倍感孤寂之心情的写照。后来,嫦娥向丈夫倾诉懊悔说:“明天乃月圆之候,你用面粉作丸,团团如圆月形状,放在屋子的西北方向,然后再连续呼唤我的名字。三更时分,我就可以回家来了。”翌日,照妻子的吩咐去做,届时嫦娥果由月中飞来,夫妻重圆。中秋节做月饼供嫦娥的风俗,也是由此形成。

接下来小编就制作一副嫦娥奔月供大家欣赏,稍微有点简略,将就将就吧。

代码如下:

<!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>

小编用的思想是设置一个背景图片,一个图片设置动画,让嫦娥的这张图图片产生一个动画的效果,让她飞向月亮的一个效果,让他实现嫦娥奔月的效果。

效果如图所示:

扫描二维码关注公众号,回复: 14750825 查看本文章

QQ录屏20220909094354

小编在这里祝愿大家一轮明月,思念无限﹔一块月饼,合家团圆﹔一声关怀,心心相牵﹔一份相牵,情谊相连﹔一个拥抱,感恩言谢﹔一路走来,你在身边﹔一起努力,美好明天!愿中秋节节日快乐!程序员也要好好休息哦!

猜你喜欢

转载自blog.csdn.net/weixin_65607135/article/details/126775827