前言
一年一度的中秋节就要到了,每年中秋节都有不一样的境遇,岁岁中秋,今有中秋。为了烘托节日气氛,结合工作内容,实现一个通过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;