CSS创造属于你的许愿灯之夜<结尾有彩蛋>

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

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

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

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

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

HTML 结构

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

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> <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>

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

CSS 样式

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

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图形初始时是隐藏的。

javascript

复制代码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图形在加载后可见。

创建主时间线和函数

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

作者：扑拉鹅子
链接：https://juejin.cn/post/7278123169259487289
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。