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

于 2024-09-17 08:30:00 发布
阅读量530 收藏 7
点赞数 12
分类专栏： JS 文章标签： css html js 中秋
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LearnerDL/article/details/142308653
版权

文章目录

前言

今天是中秋，这里先祝大家节日快乐！🎆🎆🎆 在这篇博客中，我们将展示如何通过 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，我们成功实现了一个具有中秋节气氛的动态动画效果。希望这篇博客能为你提供启发，让你在网页上制作出更多有趣的节日动画效果。

知行小栈
关注
专栏目录
看着大公司送的中秋礼物，我酸了。
张巧龙的博客
09-28 1720
点击上方“大鱼机器人”，选择“星标”公众号重磅干货，第一时间送达程序猿（微信号：imkuqin） 整编图片素材来自：脉脉、知乎、官方微博等中秋节越来越近了，平日里，各大公司拼员工拼技术拼...
2010最流行中秋祝福短信
放牛人的专栏
09-19 788
<br />○ 朋友比领导重要，能力比知识重要，健康比业绩重要，水平比文凭重要，情商比智商重要，星期日比平时重要，我的问候比送月饼重要！嘿嘿。中秋快乐。<br />○ 月到中秋分外明，节日喜气伴您行，皓月当空洒清辉，美好事儿一堆堆，在此祝您人圆家圆事业旺，节日愉快身体硬，心想事成保准赢！<br />○ 云淡风清，一轮明月廊照人家，时蓬中秋，三杯美酒，绕膝亲情。祝家庭幸福，中秋节快乐！<br />○ 一轮明月，两束清风，三棵桂树，四杯好酒，五盏灯笼，六柱弥香，七枚月饼，八人对月，九九归一，十分美满。祝你中秋生
2020互联网大厂中秋礼盒PK！我酸了！
qq452474654的专栏
09-30 2265
来自：程序猿（微信号：imkuqin）图片素材来自：脉脉、知乎、官方微博等中秋节越来越近了，平日里，各大公司拼员工拼技术拼实力；到了节日，则要拼奖金、拼福利、拼假期，还要拼创意。今天，...
2020年互联网大厂中秋礼盒PK！你们呢......
xcbeyond|疯狂源自梦想，技术成就辉煌
09-30 1448
点击上方“程序猿技术大咖”，关注加群讨论来源丨图片素材来自：脉脉、知乎、官方微博等中秋节越来越近了，平日里，各大公司拼员工拼技术拼实力；到了节日，则要拼奖金、拼福利、拼假期，还要拼创意。...
明月寄相思——蓝色 红色双色系2012中秋节ppt模板.rar
09-09
“明月寄相思”是中秋节的一个重要文化意象，象征着团圆和思念。在PPT设计中，可能会融入月亮、月饼、灯笼等中秋节元素，通过视觉传达出浓厚的节日氛围。同时，良好的设计会巧妙地将这些元素与现代设计风格相结合，...
中秋主题明月寄相思红色背景ppt模板.pptx
09-29
红色背景是典型的中国元素，代表着喜庆和团圆，而“明月寄相思”则是对中秋佳节最具代表性的寓意，象征着人们对远方亲友的思念和团聚的愿望。 【描述】：“中秋主题明月寄相思红色背景ppt模板.pptx” 描述中的...
明月寄相思——恭贺中秋ppt模板.rar
09-07
在这个特定的模板中，设计者以“明月寄相思”为主题，寓意着中秋佳节团圆和思念之情，旨在为用户营造一种温馨、喜庆的节日氛围。 【描述】中的“明月寄相思，恭贺中秋，暖暖的中秋节ppt模板，喜庆中秋ppt动态模板”...
中秋主题明月寄相思蓝色背景ppt模板.ppt
09-29
【中秋主题明月寄相思蓝色背景PPT模板】是一个技术相关的设计资源，适用于制作节日庆祝、文化展示或企业活动的演示文稿。这个模板以其独特的中秋主题和蓝色调背景，为用户提供了丰富的设计元素和布局，使得在中秋...
中秋节祝福语：中秋之夜，明月团圆.pptx
11-09
4. **中秋节的庆祝方式**：除了赏月和吃月饼，中秋节还有其他庆祝方式，如挂灯笼、猜灯谜、舞龙舞狮等，这些活动富有娱乐性和互动性，增强了节日的欢乐气氛。随着国际化的进程，中秋节也逐渐被世界各地的人们所了解...
HTML、CSS实现树状图
p_s_p的博客
09-09 615
【代码】HTML、CSS实现树状图。
项目中使用简单的立体3D柱状图，不用引入外部组件纯css也能实现
qq_35452726的博客
09-13 390
在一些项目需求中，可能会遇到下面这种场景，3d柱状图来展示百分比，但是又不想引入外部组件，下面就用纯css给大家封装了一个组件。在需要使用的地方直接引入使用就好了，只传百分比，宽高有需要再传。
使用HTML和CSS制作网页的全面指南
最新发布
weidl001的博客
09-14 1137
HTML（超文本标记语言）是构建网页的基础语言。它用于定义网页的结构和内容。通过使用不同的标签（tags），我们可以告诉浏览器如何显示文本、图像、链接等。CSS（层叠样式表）用于控制网页的外观和布局。它可以设置文本的颜色、字体、背景、边距等，使网页更加美观和用户友好。通过以上步骤，我们已经了解了如何使用HTML和CSS创建一个简单但完整的网页。主题要点HTML基础了解HTML的结构和常用标签CSS基础理解CSS的语法、选择器和常用属性网页制作步骤规划布局 -> 编写HTML -> 添加CSS实践技巧。
css 实现一个卡片
qq_41304029的博客
09-12 453
【代码】css 实现一个卡片。
【油猴脚本】00003案例 Tampermonkey油猴脚本引入css 库，油猴脚本css库的使用
宝码香车的博客
09-13 1298
附具体代码，深入理解，彻底掌握！可以一键复制，查看效果。
CSS 图片廊：打造精美视觉体验
wjs2024的博客
09-13 546
使用CSS创建图片廊是一个简单而有效的方法，可以提升网页的视觉效果和用户体验。通过本文的介绍，相信你已经掌握了如何使用CSS来打造一个精美的图片廊。在实际开发中，你可以根据自己的需求进行调整和优化，以创建出更加出色的图片廊效果。
CSS框架 Tailwind CSS
专研技术的大学生
09-11 766
在项目中如何集成Tailwind Css框架
项目实训：CSS基本布局理解——WEB开发系列38
一条晒干的咸鱼的博客
09-13 591
对CSS学习已经接近尾声，下面你可以对以下两道“小卡拉米”测试进行测试下CSS理解程度。
表格标记＜table＞
qq_74861982的博客
09-13 353
table标记是表格中最外层标记，tr表示表格中的行标记，一对表示表格中的一行，在中可以嵌套几对标记或几对标记。valign：设置单元格垂直对齐方式，可取top bottom middle baseline。align：设置表格或者单元格中，文字水平对齐方式。border:设置边框的值，默认为0，表示不可见。height：设置表格或者单元格的高度。width：设置表格或者单元格的宽度。4.td:表格中数据单元格标记。1table：表格标记。这里直接贴上代码了哦。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值