前端开发：使用HTML5简单实现嫦娥奔月动画
前言
在中秋佳节即将到来之际，作为程序员的一员，除了享受传统习俗：赏月、吃月饼、与家人团圆之外，更应该体现出程序员该有的风貌才行，那么本文就来通过前端知识来实现与中秋节相关的嫦娥奔月的动画效果，以此来为各位程序员同行送去不一样的节日祝福，提前祝大家中秋节快乐！
需求
借助前端知识来实现简单的嫦娥奔月动画。嫦娥和月亮是单独分开的两个部分，然后准备好嫦娥和月亮的素材，最后通过HTML+CSS来实现最终的动画效果。
素材
1、嫦娥姐姐和玉兔的图片素材；
2、月亮的图片素材。
代码
创建一个基于vue.js的项目工程，然后把素材拖入到项目中去，然后新建一个html的文件，最后在html文件中实现核心的嫦娥奔月的效果，具体代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嫦娥奔月</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: #111111;
}
.wrap{
width: 470px;
height: 470px;
margin: 50px auto;
border: 10px solid white;
text-align: center;
}
.wrap .moon{
/* margin-top: 50px; */
margin-top: 20px;
}
.wrap .change{
position: relative;
margin-top: -550px;
margin-left: -350px;
opacity: 0; /*全透明*/
transition-duration: 3s; /*动画过渡时间3秒*/
}
.wrap:hover .change{
transition-duration: 2s;
transform: translate(100px,100px);/*嫦娥移动方向*/
opacity: 1;/*不透明*/
}
</style>
</head>
<body>
<div class="wrap">
<div class="moon">
<img src="../assets/img/moon.png" alt="" width="430" height="430"> //月亮
</div>
<div class="change">
<img src="../assets/img/change.png" alt="" width="300" height="300"> //嫦娥
</div>
</div>
</body>
</html>效果
经过上述操作之后，就实现了嫦娥带着玉兔奔月的动画效果，具体的效果如下所示：
附：
此时此刻，此情此景，需要吟诗一首来烘托一下中秋佳节的气氛：
一年秋半月华好，况是中秋对雨时。
天上人间无尽景，可能收在醉吟诗。
最后
上面的操作只是通过前端知识来实现一个简单的嫦娥奔月的动画效果，其实还有很大的提升空间，只是迫于篇幅有限就不再详细的完善。最后再次向奋战在工作第一线程序员们致敬，祝大家在中秋节到来之际，能少遇到一点bug，多摸摸鱼，这样才能劳逸结合、健康长寿，哈哈，开个玩笑。无论再忙，大家也要记得过中秋节啊！
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2021-12-30，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读