前端开发：使用HTML5简单实现嫦娥奔月动画

最新推荐文章于 2024-05-31 20:12:49 发布

三掌柜666

最新推荐文章于 2024-05-31 20:12:49 发布

阅读量1.7k

点赞数 3

分类专栏：大前端开发常识文章标签： html5 动画 css3

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/CC1991_/article/details/121279917

版权

大前端开发常识专栏收录该内容

94 篇文章 5 订阅 ¥159.90 ¥99.00

订阅专栏

前言

中秋节虽然过去了，但是还是想分享一个知识点，基于使用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;

了解本专栏

三掌柜666

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发：使用HTML5简单实现嫦娥奔月动画

前言中秋节虽然过去了，但是还是想分享一个知识点，基于使用HTML5简单实现嫦娥奔月动画的效果，分享一下，感兴趣的读者可以复制一下代码查看一下效果。需求借助前端知识来实现简单的嫦娥奔月动画。嫦娥和月亮是单独分开的两个部分，然后准备好嫦娥和月亮的素材，最后通过HTML+CSS来实现最终的动画效果。素材1、嫦娥姐姐和玉兔的图片素材；2、月亮的图片素材。代码创建一个基于vue.js的项目工程，然后把素材拖入到项目中去，然后新建一个html的文件，最后在html文件中实现核
复制链接

扫一扫