首页 > 文章 > 前端

使用 html css 和 js 的新年快乐动画

来源：dev.to

时间：2025-01-14 15:42:45 391浏览收藏

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《使用 html css 和 js 的新年快乐动画》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

```<!doctype html>

新年快乐动画

<br> /* 一般主体样式 */<br> 正文 {<br> 溢出：隐藏；<br> 边距: 0;<br> 背景：黑色；<br> }</p> <div class="highlight"><pre class="highlight plaintext"><code>/* 文本容器 */ 。线 { 显示：柔性；调整内容：居中；对齐项目：居中；边距：10 像素；位置：相对； z 索引：10； } /* 角色动画 */ .char { 显示：内联块；字体大小：4rem；字体粗细：粗体；边距：5 像素；不透明度：0；变换：translatey(50px) 缩放(0.5)；动画：向前出现1秒，发光1.5秒无限交替； } @关键帧出现{ 从 { 不透明度：0；变换：translatey(50px) 缩放(0.5)； } 到 { 不透明度：1；变换：translatey(0) 缩放(1)； } } @关键帧发光{ 从 { 文本阴影：0 0 10px #fff，0 0 20px #ff007f，0 0 30px #7b2cbf； } 到 { 文本阴影：0 0 20px #fff，0 0 40px #00b4d8，0 0 50px #ffcc00； } } /* 向上鞭炮效果 */ .烟火{ 位置：绝对；宽度：4px；高度：4px；背景：hsl(0, 100%, 50%); 边界半径：50%；框阴影: 0 0 10px hsl(0, 100%, 50%); 动画：向前播放 1 秒的缓出； } @关键帧拍摄{ 0% { 变换：translatey(0) 缩放(0.5)；不透明度：1； } 100% { 变换：translatey(-300px) 缩放(1.5)；不透明度：0； } } /* 爆炸效果 */ .spark{ 位置：绝对；宽度：6 像素；高度：6 像素；边界半径：50%；背景：hsl(0, 100%, 50%); 框阴影: 0 0 10px hsl(0, 100%, 50%); 动画：向前爆炸 1.2 秒缓出； } @关键帧爆炸{ 0% { 变换：平移y(0) 平移x(0) 缩放(0.5)；不透明度：1； } 100% { 变换：translatey(calc(-50px (100px * var(--y-dir)))) 翻译x（计算（-50px （100px * var（--x-dir））））规模（1.5）；不透明度：0； } } </code></pre></div> <p>

<br> // 有延迟的字符<br> const 行 = [<br> { id: “line1”, text: “happy”; },<br> { id：“第 2 行”，文本：“新”； },<br> { id：“第 3 行”，文本：“年份”； }<br> ];</p> <div class="高亮"><pre class="高亮明文"><code>let 延迟 = 0; 函数 shotfirework(x, y, 回调) { const firework = document.createelement('div'); firework.classname = '烟花'; firework.style.left = `${x}px`; firework.style.top = `${y}px`; firework.style.background = `hsl(${math.random() * 360}, 100%, 50%)`; firework.style.boxshadow = `0 0 10px hsl(${math.random() * 360}, 100%, 50%)`; document.body.appendchild(烟花); settimeout(() => { 烟花.remove(); 回调（x，y）； }, 1000); // 烟花持续时间 } 函数explodefirework(x, y) { for (令 i = 0; i spark.remove(), 1200); // 火花持续时间 } } 函数revealcharacter（字符，容器，延迟）{ const span = document.createelement('span'); span.classname = 'char'; span.textcontent = char; span.style.animationdelay = `${delay}s`; span.style.color = `hsl(${math.random() * 360}, 100%, 70%)`; 容器.appendchild(span); } lines.foreach((行，索引) => { const 容器 = document.getelementbyid(line.id); line.text.split('').foreach((char, i) => { const x = window.innerwidth / 2 i * 50 - (line.text.length * 25); const y = window.innerheight; settimeout(() => { shotfirework(x, y, () => { 爆炸烟火（x，y）； revealcharacter(字符, 容器, 0); }); }, 延迟 * 1000); 延迟 = 1； // 每个角色烟花之间的延迟 }); 延迟 = 1； // 线路之间的额外延迟 }); </code></pre></div> <p>

理论要掌握，实操不能落！以上关于《使用 html css 和 js 的新年快乐动画》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

声明：本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除