中秋：明月寄相思，灯笼映团圆

news2024/11/15 23:59:19

文章目录

    • 前言
    • 项目概述
    • 实现步骤
      • 创建基础 HTML 结构
      • 添加动态背景和月亮
      • 创建 SVG 灯笼
      • 实现动态动画效果
      • 闪烁的星星效果
      • 调整灯笼和月亮尺寸
    • 完整代码
    • 结语

前言

今天是中秋，这里先祝大家节日快乐！🎆🎆🎆 在这篇博客中，我们将展示如何通过 HTML、CSS 和 JavaScript 结合 anime.js 库制作一个简单的中秋节祝福动画。我们将创建一个具有动态背景、月亮、灯笼和祝福文字的网页动画，帮助我们为节日增添一些氛围。

项目概述

整个动画包含以下元素：

  • 动态背景：由线性渐变组成的夜空。
  • 月亮：使用 div 和渐变模拟。
  • 灯笼：通过 SVG 绘制，并通过动画实现动态效果。
  • 星星：随机生成的星星，闪烁效果。
  • 祝福文字：动态显示中秋祝福语。

实现步骤

我们使用简单的 HTML 结构来定义各个元素，并通过 CSS 控制它们的外观和位置。JavaScript 则用来为动画提供交互。

创建基础 HTML 结构

首先，我们需要在 HTML 中设置动画所需的基本结构：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中秋节祝福动画</title>
  </head>
  <body>
    <div id="scene">
      <div id="moon"></div> <!-- 月亮 -->
      <div id="message">中秋节快乐！<br>愿明月照亮您的美好生活。</div> <!-- 中秋祝福文字 -->
      <div id="lantern"></div> <!-- 放大后的灯笼 -->
    </div>
  </body>
</html>

添加动态背景和月亮

接下来，我们为页面添加动态的背景以及一个月亮。背景通过线性渐变模拟夜空，月亮则使用 div 结合径向渐变来模拟。

body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(to top, #001f3f, #001f3f 50%, #111 100%);
}

/* 月亮样式 */
#moon {
  position: absolute;
  bottom: calc(30% + 100px);
  right: calc(20% - 100px);
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
  background: radial-gradient(circle, #fffdd0, #f6d365);
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.8);
}

创建 SVG 灯笼

我们使用 SVG 创建灯笼的结构，灯笼由顶部、主体和底部三部分组成，并添加了竖线来模拟灯笼的立体感。SVG 代码如下：

<div id="lantern">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 400" width="100%" height="100%">
    <!-- 灯笼顶部 -->
    <rect x="70" y="20" width="60" height="40" fill="#FFD700" />
    <rect x="60" y="60" width="80" height="15" fill="#FFD700" />
    <!-- 灯笼主部分，增加竖线 -->
    <ellipse cx="100" cy="180" rx="85" ry="120" fill="#FF0000" stroke="#000" stroke-width="2" />
    <!-- 增加竖线以增强立体感 -->
    <line x1="50" y1="80" x2="50" y2="280" stroke="#FFD700" stroke-width="3" />
    <line x1="75" y1="60" x2="75" y2="300" stroke="#FFD700" stroke-width="3" />
    <line x1="125" y1="60" x2="125" y2="300" stroke="#FFD700" stroke-width="3" />
    <line x1="150" y1="80" x2="150" y2="280" stroke="#FFD700" stroke-width="3" />
    <!-- 灯笼底部装饰 -->
    <rect x="70" y="320" width="60" height="25" fill="#FFD700" />
    <circle cx="100" cy="350" r="7" fill="#FFD700" />
    <!-- 灯笼吊穗 -->
    <line x1="100" y1="360" x2="100" y2="400" stroke="#FF0000" stroke-width="5" />
    <line x1="95" y1="360" x2="95" y2="390" stroke="#FF0000" stroke-width="5" />
    <line x1="105" y1="360" x2="105" y2="390" stroke="#FF0000" stroke-width="5" />
    <!-- 灯笼顶部环 -->
    <circle cx="100" cy="20" r="12" stroke="#FFD700" stroke-width="4" fill="none" />
    <line x1="100" y1="20" x2="100" y2="60" stroke="#FFD700" stroke-width="4" />
  </svg>
</div>

实现动态动画效果

我们使用 anime.js 实现月亮升起、文字渐现和灯笼轻微浮动的动画效果。通过 JavaScript 的 anime() 函数定义动画的目标、动画属性以及时间和效果曲线。

// 月亮升起动画
anime({
  targets: '#moon',
  translateY: ['200px', '0'], // 从底部的200px升起
  easing: 'easeOutElastic(1, 0.8)',
  duration: 4000,
  complete: function () {
    // 文字渐现动画
    anime({
      targets: '#message',
      opacity: [0, 1],
      translateX: [30, 0], // 从右侧缓缓出现
      easing: 'easeOutExpo',
      duration: 2000
    });
  }
});

// 灯笼轻微浮动动画
anime({
  targets: '#lantern svg',
  translateY: [-10, 10],
  easing: 'easeInOutSine',
  duration: 2000,
  direction: 'alternate',
  loop: true
});

闪烁的星星效果

为了增加夜空的动态效果，我们使用 JavaScript 动态生成星星，并让它们通过 anime.js 实现闪烁效果。

function createStar() {
  const star = document.createElement('div');
  star.classList.add('star');
  document.body.appendChild(star);
  const posX = Math.random() * window.innerWidth;
  const posY = Math.random() * window.innerHeight * 0.5;
  star.style.left = `${posX}px`;
  star.style.top = `${posY}px`;

  anime({
    targets: star,
    opacity: [0, 1],
    easing: 'easeInOutQuad',
    duration: 2000,
    loop: true,
    direction: 'alternate',
  });
}

// 生成多颗星星
for (let i = 0; i < 100; i++) {
  createStar();
}

调整灯笼和月亮尺寸

为了使动画在不同屏幕尺寸上都能保持良好的显示效果，我们使用 JavaScript 动态调整月亮和灯笼的大小和位置。

function adjustScene() {
  const moon = document.getElementById('moon');
  const lantern = document.getElementById('lantern');

  // 调整月亮的大小
  const moonSize = Math.min(window.innerHeight * 0.2, window.innerWidth * 0.15);
  moon.style.width = moonSize + 'px';
  moon.style.height = moonSize + 'px';

  // 重新定位灯笼位置
  lantern.style.left = window.innerWidth * 0.05 + 'px'; // 屏幕左侧 5%
}

window.onresize = adjustScene;
adjustScene(); // 初始化场景

完整代码

下面是项目的完整代码，感兴趣的小伙伴可以复制代码在浏览器中自行体验哦。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中秋节祝福动画</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
            background: linear-gradient(to top, #001f3f, #001f3f 50%, #111 100%);
        }

        /* 可视区域设置 */
        #scene {
            width: 100vw;
            height: 100vh;
            position: relative;
            overflow: hidden;
        }

        /* 月亮样式 */
        #moon {
            position: absolute;
            bottom: calc(30% + 100px);
            right: calc(20% - 100px);
            width: 15vw;
            height: 15vw;
            border-radius: 50%;
            background: radial-gradient(circle, #fffdd0, #f6d365);
            box-shadow: 0 0 60px rgba(255, 255, 255, 0.8);
        }

        /* 中秋祝福文字 */
        #message {
            position: absolute;
            bottom: 30%;
            right: calc(5% + 100px);
            color: white;
            font-size: 2rem;
            text-align: left;
            opacity: 0;
            max-width: 30%;
        }

        /* 星星样式 */
        .star {
            position: absolute;
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
            opacity: 0;
        }

        /* SVG灯笼样式 */
        #lantern {
            position: absolute;
            bottom: 20px;
            left: 5%;
            width: 80px; /* 调整灯笼的宽度 */
            height: auto;
            max-height: 160px;
        }

        @media (max-width: 768px) {
            #moon {
                width: 25vw;
                height: 25vw;
            }

            #message {
                font-size: 1.5rem;
            }

            #lantern {
                width: 60px;
                max-height: 140px;
            }
        }

        @media (max-width: 480px) {
            #moon {
                width: 35vw;
                height: 35vw;
            }

            #message {
                font-size: 1rem;
            }

            #lantern {
                width: 50px;
                max-height: 100px;
            }
        }
    </style>
</head>

<body>

    <div id="scene">
        <div id="moon"></div>
        <div id="message">中秋节快乐！<br>愿明月照亮您的美好生活。</div>
        <!-- 放大后的SVG灯笼 -->
        <div id="lantern">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 400" width="100%" height="100%">
                <!-- 灯笼顶部 -->
                <rect x="70" y="20" width="60" height="40" fill="#FFD700" />
                <rect x="60" y="60" width="80" height="15" fill="#FFD700" />
                <!-- 灯笼主部分，增加竖线 -->
                <ellipse cx="100" cy="180" rx="85" ry="120" fill="#FF0000" stroke="#000" stroke-width="2" />
                <!-- 增加竖线以增强立体感 -->
                <line x1="50" y1="80" x2="50" y2="280" stroke="#FFD700" stroke-width="3" />
                <line x1="75" y1="60" x2="75" y2="300" stroke="#FFD700" stroke-width="3" />
                <line x1="125" y1="60" x2="125" y2="300" stroke="#FFD700" stroke-width="3" />
                <line x1="150" y1="80" x2="150" y2="280" stroke="#FFD700" stroke-width="3" />
                <!-- 灯笼底部装饰 -->
                <rect x="70" y="320" width="60" height="25" fill="#FFD700" />
                <circle cx="100" cy="350" r="7" fill="#FFD700" />
                <!-- 灯笼吊穗 -->
                <line x1="100" y1="360" x2="100" y2="400" stroke="#FF0000" stroke-width="5" />
                <line x1="95" y1="360" x2="95" y2="390" stroke="#FF0000" stroke-width="5" />
                <line x1="105" y1="360" x2="105" y2="390" stroke="#FF0000" stroke-width="5" />
                <!-- 灯笼顶部环 -->
                <circle cx="100" cy="20" r="12" stroke="#FFD700" stroke-width="4" fill="none" />
                <line x1="100" y1="20" x2="100" y2="60" stroke="#FFD700" stroke-width="4" />
            </svg>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script>
        // 动态设置月亮尺寸和灯笼位置，适应不同屏幕大小
        function adjustScene() {
            const moon = document.getElementById('moon');
            const lantern = document.getElementById('lantern');

            // 调整月亮的大小
            const moonSize = Math.min(window.innerHeight * 0.2, window.innerWidth * 0.15);
            moon.style.width = moonSize + 'px';
            moon.style.height = moonSize + 'px';

            // 重新定位灯笼位置
            lantern.style.left = window.innerWidth * 0.05 + 'px'; // 屏幕左侧 5%
        }

        // 窗口调整大小时重新计算场景元素
        window.onresize = adjustScene;
        adjustScene(); // 初始化场景

        // 月亮升起动画
        anime({
            targets: '#moon',
            translateY: ['200px', '0'], // 从底部的200px升起
            easing: 'easeOutElastic(1, 0.8)',
            duration: 4000,
            complete: function () {
                // 文字渐现动画
                anime({
                    targets: '#message',
                    opacity: [0, 1],
                    translateX: [30, 0], // 从右侧缓缓出现
                    easing: 'easeOutExpo',
                    duration: 2000
                });
            }
        });

        // 星星闪烁函数
        function createStar() {
            const star = document.createElement('div');
            star.classList.add('star');
            document.body.appendChild(star);
            const posX = Math.random() * window.innerWidth;
            const posY = Math.random() * window.innerHeight * 0.5;
            star.style.left = `${posX}px`;
            star.style.top = `${posY}px`;

            anime({
                targets: star,
                opacity: [0, 1],
                easing: 'easeInOutQuad',
                duration: 2000,
                loop: true,
                direction: 'alternate',
            });
        }

        // 生成多颗星星
        for (let i = 0; i < 100; i++) {
            createStar();
        }

        // 灯笼动画效果
        anime({
            targets: '#lantern svg',
            translateY: [-10, 10],
            easing: 'easeInOutSine',
            duration: 2000,
            direction: 'alternate',
            loop: true
        });
    </script>

</body>

</html>

结语

通过简单的 HTML、CSS 和 anime.js，我们成功实现了一个具有中秋节气氛的动态动画效果。希望这篇博客能为你提供启发，让你在网页上制作出更多有趣的节日动画效果。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2141695.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ChatGPT有三个快捷指令和三个模式，你知道吗？

ChatGPT有三个快捷指令和三个模式，你知道吗？

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;专注于分享AI全维度知识&#xff0c;包括但不限于AI科普&#xff0c;AI工…
阅读更多...
xtu oj 折纸

xtu oj 折纸

折纸# 题目描述# 一个长为a,宽为b矩形的纸&#xff0c;我们沿b边(左边)的中点与右上顶点的边折叠&#xff0c;求左上顶点在折叠以后离下边的距离&#xff1f; 输入# 第一行是一个整数T(1≤T≤10000),表示样例的个数。 以后每行一个样例&#xff0c;为两个整数1≤a,b≤1000。…
阅读更多...
​FullCalendar：强大的JavaScript事件日历

​FullCalendar：强大的JavaScript事件日历

​FullCalendar&#xff1a;强大的JavaScript事件日历 如果你想让项目的日历功能像你周末一样灵活又强大&#xff0c;那么 FullCalendar 就是你的不二选择&#xff01;本文将带你了解这款高效的 JavaScript 日历库的亮点与使用方式。 软件简介 FullCalendar 是一个用 JavaScri…
阅读更多...
PMP--一模--解题--101-110

PMP--一模--解题--101-110

文章目录 11.风险管理--过程--识别风险→实施定性风险分析→实施定量风险分析→规划风险应对→实施风险应对→监督风险101、 [单选] 在项目即将进入收尾阶段时&#xff0c;项目经理发现了一项原来没有考虑到的新风险。该风险一旦发生&#xff0c;可能给最终的可交付成果带来重要…
阅读更多...
CSS——网格布局（display: grid）之上篇

CSS——网格布局（display: grid）之上篇

CSS——网格布局&#xff08;display: grid&#xff09; 前面介绍了弹性布局&#xff0c;今天我们介绍一下网格布局。 什么是网格布局 CSS网格布局&#xff08;CSS Grid Layout&#xff09;是一种用于创建复杂网页布局的系统&#xff0c;它允许开发者以二维系统&#xff08;…
阅读更多...
【C++学习】 IO 流揭秘：高效数据读写的最佳实践

【C++学习】 IO 流揭秘：高效数据读写的最佳实践

✨ 今朝有酒今朝醉&#xff0c;明日愁来明日愁 &#x1f30f; &#x1f4c3;个人主页&#xff1a;island1314 &#x1f525;个人专栏&#xff1a;C学习 ⛺️ 欢迎关注&#xff1a;&#x1f44d;点赞 &#x1f442;&#x1f3f…
阅读更多...
Docker部署ddns-go教程(包含完整的配置过程)

Docker部署ddns-go教程(包含完整的配置过程)

本章教程教程，主要介绍如何用Docker部署ddns-go。 一、拉取容器 docker pull jeessy/ddns-go:v6.7.0二、运行容器 docker run -d \--name ddns-go \--restart unless-stopped \
阅读更多...
蓝桥杯—STM32G431RBT6按键的多方式使用（包含软件消抖方法精讲）从原理层面到实际应用（一）

蓝桥杯—STM32G431RBT6按键的多方式使用（包含软件消抖方法精讲）从原理层面到实际应用（一）

新建工程教程见http://t.csdnimg.cn/JySLg 点亮LED教程见http://t.csdnimg.cn/Urlj5 末尾含所有代码 目录 按键原理图 一、按键使用需要解决的问题 1.抖动 1.什么是抖动 2.抖动类型 3.如何去消除抖动 FIRST.延时函数消抖&#xff08;缺点&#xff1a;浪费CPU资源&#xff…
阅读更多...
1.使用 IDEA 过程中的英语积累 - File 菜单（每一次重点积累 5 个单词）

1.使用 IDEA 过程中的英语积累 - File 菜单（每一次重点积累 5 个单词）

前言 学习可以不局限于传统的书籍和课堂&#xff0c;各种生活的元素也都可以做为我们的学习对象&#xff0c;本文将利用 IDEA 页面上的各种英文元素来做英语的积累&#xff0c;如此做有 3 大利 这些软件在我们工作中是时时刻刻接触的&#xff0c;借此做英语积累再合适不过&…
阅读更多...
web开发 之 HTML、CSS、JavaScript、以及JavaScript的高级框架Vue（学习版2）

web开发 之 HTML、CSS、JavaScript、以及JavaScript的高级框架Vue（学习版2）

一、前言 接下来就是来解决这些问题 二、 Ajax 1.ajax javscript是网页三剑客之一&#xff0c;空用来控制网页的行为的 xml是一种标记语言&#xff0c;是用来存储数据的 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-…
阅读更多...
Fastjson反序列化漏洞——JNDI注入

Fastjson反序列化漏洞——JNDI注入

一.前言 之前使用反序列化和序列化时写入的到文件里面的&#xff0c;真实环境中&#xff0c;也是这样吗&#xff1f; 当然不是了&#xff0c;通过二进制&#xff0c;字节流数据进行的。 为什么会有JNDI&#xff1f; 由于http和ftp传输消耗资源仍然很大&#xff0c;就有了JRM…
阅读更多...
macOS Sequoia发布：Apple又给我们带来了什么惊喜？

macOS Sequoia发布：Apple又给我们带来了什么惊喜？

今天是个激动人心的日子，尤其是对于Mac用户来说，因为Apple正式发布了全新的操作系统——macOS Sequoia。作为一款专为Mac设备设计的操作系统，Sequoia不仅仅是简单的升级，它承载了Apple在系统体验上的巨大飞跃。听到这个消息，你可能会好奇，Apple这次又会带来什么样的创新？…
阅读更多...
【Python】高效图像处理库：pyvips

【Python】高效图像处理库：pyvips

月亮慢慢变圆&#xff0c;日子慢慢变甜。 在图像处理领域&#xff0c;pyvips 是一个轻量级且高效的库&#xff0c;适合处理大规模图像、实现高性能的操作。相较于其他常见的图像处理库如 PIL 或 OpenCV&#xff0c;pyvips 以其低内存占用和出色的速度脱颖而出。本文将介绍 pyv…
阅读更多...
2024年全国大学生数学建模竞赛B题生产过程中的决策问题分析

2024年全国大学生数学建模竞赛B题生产过程中的决策问题分析

目录 引言 问题 1&#xff1a;抽样检测方案设计 问题 2&#xff1a;生产过程中的决策 决策阶段划分 决策方案 结果 问题 3&#xff1a;多道工序和零配件的决策 生产流程 决策过程 问题 4&#xff1a;基于抽样检测的重新决策 动态调整次品率 结论 引言 在2024年全国…
阅读更多...
[Golang] Sync

[Golang] Sync

[Golang] Sync 文章目录 [Golang] Syncsync.WaitGroupsync.Once对比init() sync.Lock互斥锁和读写锁互斥锁读写锁 死锁问题加锁解锁不成对循环等待 sync.Mapsync/atomicatomic和mutex的区别atomic.value sync.Pool如何使用sync.Pool使用场景 Golang中我们一般提倡使用通信来共享…
阅读更多...
Java入门，初识Java

Java入门，初识Java

Java背景知识 Java是早期美国 sun 公司&#xff08;Stanford University Network&#xff09;在1995年推出的一门计算机高级编程语言。Java早期称为Oak&#xff08;中文翻译为&#xff1a;橡树&#xff09;&#xff0c;后期改名为Java。&#xff08;因为当时sun公司门口有很多…
阅读更多...
MySQL_数据类型简介

MySQL_数据类型简介

课 程 推 荐我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448;入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448;虚 拟 环 境 搭 建 &#xff1a;&#x1…
阅读更多...
【计算机网络】TCP 协议——详解三次握手与四次挥手

【计算机网络】TCP 协议——详解三次握手与四次挥手

文章目录 一、引言二、TCP1、TCP 的数据格式2、TCP 的三次握手3、TCP 的四次挥手4、TCP 的全双工通信 三、TCP 的状态转换1、TCP 连接的建立&#xff08;三次握手&#xff09;状态2、TCP 连接的终止&#xff08;四次挥手&#xff09;状态3、TCP 异常情况 一、引言 TCP与UDP的区…
阅读更多...
Linux操作系统文件权限管理

Linux操作系统文件权限管理

Linux操作系统下文件的权限分为当前用户权限、用户组权限和其他用户权限&#xff0c;然后每一类用户或组又分为读权限(r)、写权限(w)和可执行权限(x)。 如图1&#xff0c;打开任一目录&#xff0c;右键单击文件&#xff0c;在弹出菜单选择“属性”&#xff0c;在弹出的属性选项…
阅读更多...
一款强大的吉他乐谱编辑软件GuitarPro 8.2中文解锁版

一款强大的吉他乐谱编辑软件GuitarPro 8.2中文解锁版

GuitarPro 8.2中文解锁版是一款强大的吉他乐谱编辑软件&#xff0c;适合新手和专业乐手。它提供详尽教程和实用工具&#xff0c;助力初学者掌握吉他技巧&#xff1b;对于专业乐手&#xff0c;它精准记录音符和节奏&#xff0c;提供丰富编辑功能和音效处理。此外&#xff0c;软件…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023