🏮中秋节特别定制(升级版)：CSS创造属于你的漫天星空许愿灯之夜<结尾有彩蛋>

扑拉鹅子
6,573 阅读6分钟

掘友们，不卖关子，让我们先运行点击文字预览一波效果！！！🏮

# 中秋创意投稿大赛

中秋节，又称为月圆节，是中国传统的重要节日之一。这一天，家人团聚，赏月吃月饼，而其中一个备受期待的活动就是放飞许愿灯。在上篇文章:# 多"财"多"亿"迎中秋<前端技术制作中秋贺卡>。初探前端，制作了一个贺卡，这次我将展示如何使用前端技术制作一个令人惊叹的许愿灯升空动画，让掘友们的中秋节更加特别。

先别说别的掘友们：小弟祝大家年年圆满如意，月月事事顺心，日日喜悦无忧，时时高兴欢喜，刻刻充满朝气，月圆人圆花好，事顺业顺家兴！中秋节快乐！

第二版

2023年9月20日

应掘友们要求!!!! 再次更新一版漫天星空许愿灯!!!!! 增加代码如下

<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>

对应内容太多,不贴代码了!!!请移步码上掘金查看CSS,效果如下

第一版

好，接下来让我们开始摇摆

在开始之前，确保准备好以下资源：

  1. 美妙的音乐：为许愿灯升空场景选择一段特别的音乐。这段音乐将为动画增色不少。在该文章中，我使用了名为 "start.ogg" 的音频文件。
  2. 独特的SVG图形：创建一个独一无二的许愿灯SVG图形，你可以使用矢量图形编辑工具（如Adobe Illustrator）来实现。确保图形有足够的细节，使其在动画中看起来更加生动。

主结构(码上掘金内代码移除部分框架)

首先，创建一个HTML文件，用于容纳我们的SVG图形和触发动画的按钮。以下是一个简化的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中秋节许愿灯</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
        <!-- 这里将插入我们的SVG图形 -->
    </svg>
    <p class="release">掘友们点击放飞许愿灯</p>
    <audio id="scPlayer" src="start.ogg" loop></audio>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

image.png

在这个结构中，我们引入了必要的CSS文件、JavaScript文件以及音频文件。我们将在SVG标签中插入SVG图形，并使用一个段落（p）元素表示“放飞许愿灯”的按钮。

CSS 样式

接下来，让我们为我们的HTML添加一些基本的CSS样式，以确保页面正常显示和美观。

body {
    background-color: #01000F;
    overflow: hidden;
}

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

svg {
    position: absolute;
    width: 100%;
    height: 100%;
    visibility: hidden;
    overflow: visible;
}

.release {
    top: 50%;
    left: 50%;
    position: absolute;
    text-align: center;
    transform: translate(-50%, -50%);
    color: #ededed;
    font-family: Microsoft Yahei;
    letter-spacing: 1em;
    user-select: none;
    pointer-events: none;
    width: 100%;
}

上述CSS样式将页面的背景色设置为深蓝色，并确保SVG图形充满整个窗口。"release" 类的样式将按钮居中显示在页面上。

当然，有美感的大佬们也可以整一个五彩斑斓的黑，去css比色表找rgb色彩即可;

JavaScript 动画 (评论的老兄 "勾" 加上了 谢过)

现在，让我们开始编写JavaScript代码，通过TweenMax库创建一个令人惊叹的许愿灯升空动画。我们将逐步分析每个部分的实现逻辑。

设置初始变量和SVG可见性

首先，我们定义了一些初始的变量，这些变量将在整个动画中使用。我们还确保SVG图形初始时是隐藏的。

var xmlns = "http://www.w3.org/2000/svg",
    xlinkns = "http://www.w3.org/1999/xlink",
    select = function(s) {
        return document.querySelector(s);
    },
    selectAll = function(s) {
        return document.querySelectorAll(s);
    },
    heartContainer = select('.heartContainer'),
    heartContainerInv = select('.heartContainerInv'),
    scPlayer, trackEnded = false;

TweenMax.set('svg', {
    visibility: 'visible'
});

在这里，我们使用了TweenMax库的一些功能，确保SVG图形在加载后可见。

image.png

创建主时间线和函数

接下来，我们创建了一个主时间线（mainTl），该时间线用于控制所有动画的播放。我们还定义了一些函数，用于生成许愿灯、让许愿灯摆动和生成随机数。

var mainTl = new TimelineMax();

function makeHearts() {
    // 生成许愿灯的代码将在下文讨论
}

function sway(l) {
    // 让许愿灯摆动的代码将在下文讨论
}

function randomBetween(min, max) {
    // 生成指定范围内的随机数的代码将在下文讨论
}

这些函数将在后面的步骤中实现。

创建闪烁效果

我们使用TweenMax库创建了一个闪烁效果，使许愿灯在升空的过程中闪烁。这个效果通过修改SVG的颜色来实现。

image.png

// 创建闪烁效果
TweenMax.staggerTo('.flicker', 2.8, {
    stopColor: '#BF3A0B',
    repeat: -1,
    ease: RoughEase.ease.config({
        template: Power0.easeNone,
        strength: 3,
        points: 10,
        taper: "none",
        randomize: true,
        clamp: false
    }),
    yoyo: true
}, 0.1);

在这里，我们使用了TweenMax的功能来创建闪烁效果，使用了RoughEase来模拟自然的闪烁效果。

创建许愿灯动画

现在，让我们来创建生成许愿灯并让它们升空的动画。

function makeHearts() {
    var h, destContainer;
    for (var i = 0; i < 100; i++) {
        // 生成许愿灯的代码将在下文讨论
    }
}

在这个函数中，我们将生成100个许愿灯，并将它们添加到页面中。生成许愿灯的具体代码将在下文中解释。

image.png

让许愿灯摆动

我们还可以让许愿灯在升空的过程中自然地摆动。这样可以增加动画的真实感

function sway(l) {
    var val = randomBetween(1, 30);
    var rand = Math.random() - 0.5;
    TweenMax.fromTo(l, randomBetween(6, 20), {
        rotation: val,
    }, {
        rotation: -val,
        repeat: -1,
        yoyo: true,
        ease: Sine.easeInOut
    });
    TweenMax.to(l, randomBetween(10, 30), {
        repeat: -1,
        x: l._gsTransform.x + (rand * (300)),
        yoyo: true,
        ease: Sine.easeInOut
    });
}

这个函数通过随机角度和位置来实现许愿灯的摆动效果。

image.png

生成随机数

在许多地方，我们需要生成随机数，例如设置许愿灯的初始位置和速度。以下是生成随机数的函数。

function randomBetween(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

这个函数返回一个介于min和max之间的随机整数。

检查音乐是否结束

我们创建了一个函数（checkTrack），用于检查音乐是否已结束，如果结束了，则停止许愿灯的动画。

function checkTrack() {
    if (trackEnded) {
        TweenMax.killTweensOf(this.target);
    }
}

这个函数将在后面的代码中调用，以确保动画的同步。

初始化音乐播放器

最后，我们创建了一个音乐播放器（scPlayer），并将音频文件加载到其中。我们还设置了音量和循环播放。

(function() {
    scPlayer = new Audio();
    scPlayer.src = 'start.ogg'; // 音频文件的路径
    scPlayer.volume = 1;
    scPlayer.loop = true;
})();

创建触发动画的按钮

我们使用以下代码为页面添加了一个点击按钮，当用户点击按钮时，音乐开始播放，许愿灯动画开始。

select('body').onclick = function() {
    scPlayer.play();
    makeHearts();

    TweenMax.to('.release', 13, {
        y: '-=400',
        alpha: 0,
        ease: Sine.easeIn
    });

    select('body').ontouchstart = select('body').onclick = null;
};

在这里，我们使用了TweenMax库的功能来播放音乐、生成许愿灯和将“点击放飞许愿灯”按钮移出屏幕以及逐渐消失。还有一些事件监听器，以确保在触发动画后不再响应点击事件。

完成许愿灯动画

最后，我们设置了一个事件监听器，以确保许愿灯动画在音乐结束后停止。

select('body').ontouchstart = select('body').onclick;

这是我们的JavaScript代码的概述，它创建了一个令人印象深刻的许愿灯升空动画，与音乐和用户的互动。

结语

在本文，使用前端技术创建一个有趣的中秋节许愿灯升空动画。使用了SVG图形、TweenMax库以及HTML和CSS来实现这个项目。祝您中秋节快乐，愿您的愿望都能实现！

彩蛋:代码中还有心型蒙版哦;

image.png

avatar
文章
阅读
粉丝