过年了，你有多久没有放鞭炮了呢？
2024-05-29 09:52:55
过年了，一起来放鞭炮吗？
提前祝大家新年快乐呀，不知道大家有没有这样的感觉，为什么越长大，越觉得过年没有了年味？回想小时候和小伙伴们一起拿着鞭炮到田里看到什么炸什么的日子，还真是遥远，现在是无法在像一起那样了，那么就在网上来一起放鞭炮吧！
预览
实现
一、vue实现
template
<template><div id="app"><div class="firecrackers"><div class="Stick"></div><div class="line"><div v-for="n in crackerNum" :key="n" class="cracker"></div><div class="fire" v-for="n in 10" :key="n"></div><audiosrc="./assets/鞭炮声.mp3"controls="controls"preloadid="music"hidden></audio></div></div><div class="play" @click="play()">点炮竹</div></div>
</template>
script
初始化鞭炮的样式
初始化鞭炮的样式，让鞭炮左右倾斜排布。
//初始化炮竹
initCrackers() {let crackers = document.getElementsByClassName("cracker");let num = 0;let j = 0;while (crackers.length > j) {for (let i = 0; i < 2; ++i) {let cracker = crackers[j];j++;cracker.style.top = num * this.crackerHeight + "px";if (j % 2 == 0) {cracker.style.transform = "rotate(30deg)";cracker.style.left = "-5px";} else {cracker.style.transform = "rotate(-30deg)";}}num++;}
},
初始化火花
初始化火花，生成一定范围内随机排布的火花
//初始化火花
initFires() {let fires = document.getElementsByClassName("fire");for (let i = 0; i < fires.length; i++) {fires[i].style.top =this.crackerHeight * (this.crackerNum / 2) +parseFloat(this.getRandom(2)) +"px";fires[i].style.left = parseFloat(this.getRandom(10)) + "px";}
},getRandom(n) {let r = Math.random() * n;let flag = Math.random();if (flag > 0.5) return -r;return r;},
},
点燃鞭炮
点击燃烧鞭炮，添加飘落效果和鞭炮声
//点炮竹
play(len = "") {let crackers = document.getElementsByClassName("cracker");let fires = document.getElementsByClassName("fire");let audio = document.getElementById("music");if (audio.paused) {audio.play(); // 播放}if (len == "") len = crackers.length - 1;crackers[len].classList.add("to-smoke");crackers[len - 1].classList.add("to-smoke");setTimeout(() => {crackers[len].remove();crackers[len - 1].remove();}, 5000);for (let i = 0; i < fires.length; i++) {fires[i].style.display = "block";fires[i].style.top =parseInt(fires[i].style.top) - this.crackerHeight + "px";}setTimeout(() => {if (len - 2 >= 0) {this.play(len - 2);} else {for (let i = fires.length - 1; i >= 0; i--) {fires[i].remove();audio.pause();}}}, this.speed);
},
css
粒子闪烁动画简单模拟火花
@keyframes fireAni {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}
}
鞭炮燃烧后飘落效果
@keyframes smoky {to {background-color: whitesmoke;transform: translate3d(200px, 80px, 0) rotate(-40deg) skewX(70deg)scale(1.5);text-shadow: 0 0 20px whitesmoke;opacity: 0;}
}
完整代码
<template><div id="app"><div class="firecrackers"><div class="Stick"></div><div class="line"><div v-for="n in crackerNum" :key="n" class="cracker"></div><div class="fire" v-for="n in 10" :key="n"></div><audiosrc="./assets/鞭炮声.mp3"controls="controls"preloadid="music"hidden></audio></div></div><div class="play" @click="play()">点炮竹</div></div>
</template><script>
export default {name: "app",components: {},data() {return {crackerHeight: 12, //炮竹高度speed: 200, //燃烧速度mscrackerNum: 80, //炮竹数量};},methods: {init() {this.initCrackers();this.initFires();this.initLine();},//点炮竹play(len = "") {let crackers = document.getElementsByClassName("cracker");let fires = document.getElementsByClassName("fire");let audio = document.getElementById("music");if (audio.paused) {audio.play(); // 播放}if (len == "") len = crackers.length - 1;crackers[len].classList.add("to-smoke");crackers[len - 1].classList.add("to-smoke");setTimeout(() => {crackers[len].remove();crackers[len - 1].remove();}, 5000);for (let i = 0; i < fires.length; i++) {fires[i].style.display = "block";fires[i].style.top =parseInt(fires[i].style.top) - this.crackerHeight + "px";}setTimeout(() => {if (len - 2 >= 0) {this.play(len - 2);} else {for (let i = fires.length - 1; i >= 0; i--) {fires[i].remove();audio.pause();}}}, this.speed);},//初始化炮竹initCrackers() {let crackers = document.getElementsByClassName("cracker");let num = 0;let j = 0;while (crackers.length > j) {for (let i = 0; i < 2; ++i) {let cracker = crackers[j];j++;cracker.style.top = num * this.crackerHeight + "px";if (j % 2 == 0) {cracker.style.transform = "rotate(30deg)";cracker.style.left = "-5px";} else {cracker.style.transform = "rotate(-30deg)";}}num++;}},//初始化炮竹线initLine() {let line = document.getElementsByClassName("line")[0];line.style.height = this.crackerHeight * (this.crackerNum / 2) + "px";},//初始化火花initFires() {let fires = document.getElementsByClassName("fire");for (let i = 0; i < fires.length; i++) {fires[i].style.top =this.crackerHeight * (this.crackerNum / 2) +parseFloat(this.getRandom(2)) +"px";fires[i].style.left = parseFloat(this.getRandom(10)) + "px";}},getRandom(n) {let r = Math.random() * n;let flag = Math.random();if (flag > 0.5) return -r;return r;},},mounted() {this.init();},
};
</script><style lang="scss" scoped>
#app {font-family: "Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;.firecrackers {position: relative;width: 60%;height: 60%;left: 20%;.Stick {background-color: grey;height: 300px;width: 5px;position: absolute;transform: rotate(45deg);}.line {background-color: grey;height: 300px;width: 2px;position: absolute;top: 43px;left: 106px;.cracker {width: 5px;height: 12px;background-color: red;position: absolute;}.fire {background-color: orange;width: 5px;height: 5px;border-radius: 50%;top: 300px;position: absolute;animation: fireAni 1s infinite;display: none;}}}.play {cursor: pointer;}.to-smoke {text-shadow: 0 0 0 whitesmoke;animation: smoky 5s;}@keyframes fireAni {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}@keyframes smoky {to {background-color: whitesmoke;transform: translate3d(200px, 80px, 0) rotate(-40deg) skewX(70deg)scale(1.5);text-shadow: 0 0 20px whitesmoke;opacity: 0;}}
}
</style>二、原生js实现
html
<body><div id="app"><div class="firecrackers"><div class="Stick"></div><div class="line"></div></div><div class="play" onclick="play()">点炮竹</div><audiosrc="./assets/鞭炮声.mp3"controls="controls"preloadid="music"hidden></audio></div>
</body>
script
初始化炮竹元素
初始化鞭炮的样式，让鞭炮左右倾斜排布。
//初始化炮竹
function initCrackers() {let crackers = document.getElementsByClassName("cracker");let num = 0;let j = 0;while (crackers.length > j) {for (let i = 0; i < 2; ++i) {let cracker = crackers[j];j++;cracker.style.top = num * crackerHeight + "px";if (j % 2 == 0) {cracker.style.transform = "rotate(30deg)";cracker.style.left = "-5px";} else {cracker.style.transform = "rotate(-30deg)";}}num++;}
}
初始化火花
在一定范围内随机生成闪烁的元素来模拟火花。
//初始化火花
function initFires() {let fires = document.getElementsByClassName("fire");for (let i = 0; i < fires.length; i++) {fires[i].style.top =crackerHeight * (crackerNum / 2) + parseFloat(getRandom(2)) + "px";fires[i].style.left = parseFloat(getRandom(10)) + "px";}
}
function getRandom(n) {let r = Math.random() * n;let flag = Math.random();if (flag > 0.5) return -r;return r;
}
初始化页面
使用js动态生成dom元素
function initPage() {let line = document.getElementsByClassName("line")[0];let temp = ``;for (let i = 0; i < crackerNum; i++) {temp += `<div key="${i}" class="cracker"></div>`;}for (let i = 0; i < 10; i++) {temp += `<div key="${i}" class="fire"></div>`;}line.innerHTML = temp;initLine();initCrackers();initFires();
}
点燃鞭炮
点击燃烧鞭炮，添加飘落效果和鞭炮声
//点炮竹
function play(len = "") {let crackers = document.getElementsByClassName("cracker");let fires = document.getElementsByClassName("fire");let audio = document.getElementById("music");if (audio.paused) {audio.play(); // 播放}if (len == "") len = crackers.length - 1;crackers[len].classList.add("to-smoke");crackers[len - 1].classList.add("to-smoke");setTimeout(() => {crackers[len].remove();crackers[len - 1].remove();}, 5000);for (let i = 0; i < fires.length; i++) {fires[i].style.display = "block";fires[i].style.top =parseInt(fires[i].style.top) - crackerHeight + "px";}setTimeout(() => {if (len - 2 >= 0) {play(len - 2);} else {for (let i = fires.length - 1; i >= 0; i--) {fires[i].remove();audio.pause();}}}, speed);
}
css
粒子闪烁动画简单模拟火花
@keyframes fireAni {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}
}
鞭炮燃烧后飘落效果
@keyframes smoky {to {background-color: whitesmoke;transform: translate3d(200px, 80px, 0) rotate(-40deg) skewX(70deg)scale(1.5);text-shadow: 0 0 20px whitesmoke;opacity: 0;}
}
完整代码
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><div id="app"><div class="firecrackers"><div class="Stick"></div><div class="line"></div></div><div class="play" onclick="play()">点炮竹</div><audiosrc="./assets/鞭炮声.mp3"controls="controls"preloadid="music"hidden></audio></div></body><script type="text/javascript">const crackerHeight = 12; //炮竹高度const speed = 200; //燃烧速度msconst crackerNum = 80; //炮竹数量function initPage() {let line = document.getElementsByClassName("line")[0];let temp = ``;for (let i = 0; i < crackerNum; i++) {temp += `<div key="${i}" class="cracker"></div>`;}for (let i = 0; i < 10; i++) {temp += `<div key="${i}" class="fire"></div>`;}line.innerHTML = temp;initLine();initCrackers();initFires();}//点炮竹function play(len = "") {let crackers = document.getElementsByClassName("cracker");let fires = document.getElementsByClassName("fire");let audio = document.getElementById("music");if (audio.paused) {audio.play(); // 播放}if (len == "") len = crackers.length - 1;crackers[len].classList.add("to-smoke");crackers[len - 1].classList.add("to-smoke");setTimeout(() => {crackers[len].remove();crackers[len - 1].remove();}, 5000);for (let i = 0; i < fires.length; i++) {fires[i].style.display = "block";fires[i].style.top =parseInt(fires[i].style.top) - crackerHeight + "px";}setTimeout(() => {if (len - 2 >= 0) {play(len - 2);} else {for (let i = fires.length - 1; i >= 0; i--) {fires[i].remove();audio.pause();}}}, speed);}//初始化炮竹function initCrackers() {let crackers = document.getElementsByClassName("cracker");let num = 0;let j = 0;while (crackers.length > j) {for (let i = 0; i < 2; ++i) {let cracker = crackers[j];j++;cracker.style.top = num * crackerHeight + "px";if (j % 2 == 0) {cracker.style.transform = "rotate(30deg)";cracker.style.left = "-5px";} else {cracker.style.transform = "rotate(-30deg)";}}num++;}}//初始化炮竹线function initLine() {let line = document.getElementsByClassName("line")[0];line.style.height = crackerHeight * (crackerNum / 2) + "px";}//初始化火花function initFires() {let fires = document.getElementsByClassName("fire");for (let i = 0; i < fires.length; i++) {fires[i].style.top =crackerHeight * (crackerNum / 2) + parseFloat(getRandom(2)) + "px";fires[i].style.left = parseFloat(getRandom(10)) + "px";}}function getRandom(n) {let r = Math.random() * n;let flag = Math.random();if (flag > 0.5) return -r;return r;}initPage();</script><style>body {height: 100%;width: 100%;background-color: rgb(19, 12, 12);}#app {font-family: "Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}.firecrackers {position: relative;width: 60%;height: 60%;left: 20%;}.Stick {background-color: grey;height: 300px;width: 5px;position: absolute;transform: rotate(45deg);}.line {background-color: grey;height: 300px;width: 2px;position: absolute;top: 43px;left: 106px;}.cracker {width: 5px;height: 12px;background-color: red;position: absolute;}.fire {background-color: orange;width: 5px;height: 5px;border-radius: 50%;top: 300px;position: absolute;animation: fireAni 1s infinite;display: none;}.play {cursor: pointer;color: whitesmoke;}.to-smoke {text-shadow: 0 0 0 whitesmoke;animation: smoky 5s;}@keyframes fireAni {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}@keyframes smoky {to {background-color: whitesmoke;transform: translate3d(200px, 80px, 0) rotate(-40deg) skewX(70deg)scale(0.5);text-shadow: 0 0 20px whitesmoke;opacity: 0;}}</style>
</html>说在后面
代码写得有点丑，实现效果也没有很炫酷，只是有感而发，做了这样一个页面来给自己增加一点年味，在这里提前祝大家新年快乐，虎年虎虎生威，如虎添翼。
过年了，你有多久没有放鞭炮了呢？相关推荐
- html5 放鞭炮效果,flash如何制作鞭炮的爆炸效果
本教程是向大家介绍利用flash制作鞭炮的爆炸效果,不用AS,就可以实现一串鞭炮爆炸,教程实用性还不错,推荐给大家,希望对大家有所帮助! 要过年了,少不了想放鞭炮,生活中的事儿,网上的也全要有.怎么让 ...
- html5 放鞭炮效果,flash制作鞭炮的爆炸效果（不需AS）
本教程是向大家介绍利用flash制作鞭炮的爆炸效果,不用AS,就可以实现一串鞭炮爆炸,教程实用性还不错,推荐给大家,希望对大家有所帮助! 要过年了,少不了想放鞭炮,生活中的事儿,网上的也全要有.怎么让 ...
- 《1024伐木累》-放鞭炮，发财还是健康
过年的时候,最烦的就是走亲戚,七大姑.八大姨,你一言我一语的,真心受不了啊.突然想起一个事儿来,世界杯之于足球,四年一届,如果春节之于中国,也是四年一届的话,可以减少多少浪费?可以降低多少七大姑八大姨 ...
- 用C语言解决刘备、关羽、张飞放鞭炮问题
用C语言解决刘备.关羽.张飞放鞭炮问题 过年了,刘备.关羽.张飞一起放鞭炮,每一个人一支香,每人初始都为N个鞭炮(散),刘备每一秒燃放一个,关羽每两秒燃放一个,张飞每三秒燃放一个,在不考虑燃烧时间跟安 ...
- 年三十 放鞭炮 驱年兽 迎新春 财运到 兔年大吉
大年三十(除夕) 除夕,为岁末的最后一天夜晚.岁末的最后一天称为"岁除",意为旧岁至此而除,另换新岁.除,即去除之意:夕,指夜晚."除夕"是岁除之夜的意思,又称 ...
- C语言：甲乙丙三人放鞭炮，求鞭炮响声问题
**问题描述:**甲.乙.丙三人同时放鞭炮,甲每隔A秒放一个,乙每隔B秒放一个,丙每隔C秒放一个,他们各自放D个,对任意给定的A.B.C.D,求能听到多少声炮响(多个鞭炮一起响算作一声) /*1.甲乙 ...
- 【无标题】upc放鞭炮13855
题目描述 小朋友们都喜欢放鞭炮,尤其是男生在春节时,什么爆竹.摔炮还有各种烟花,玩得不亦乐乎. 今年的春节,小冲就不开心了,因为他在踢足球的时候把脚给扭伤了,现在只能躺在床上听着外面的小伙伴们放鞭炮的 ...
- 给我一个放鞭炮动画的代码，使用C#执行
好的,这是一个使用 C 语言编写的放鞭炮动画的示例代码: #include <stdio.h> #include <unistd.h>int main() {for (int ...
- 编写一个C程序，实现以下功能： 张三、李四、王五三个人同时放鞭炮，张三每隔i秒放一个，李四每隔j秒放一个，王五每隔k秒放一个，他们各自放n个。对任意给定的i、j、k和n，求能听到多少声鞭炮响。
编写一个C程序,实现以下功能: 张三.李四.王五三个人同时放鞭炮,张三每隔i秒放一个,李四每隔j秒放一个,王五每隔k秒放一个,他们各自放n个.对任意给定的i.j.k和n,求能听到多少声鞭炮响. 文章目 ...
最新文章
- mysql基础（一） 编译安装mysql5.5
- 《追风行动》有点儿意思
- 成功秀了一波scala spark ML逻辑斯蒂回归
- hibernate自定义校验器使用（字段在in范围之内）
- 数字图像处理：视觉系统中的坐标系介绍
- 在Saas发展的黄金时代里带你理解SaaS设计
- 修改Yarn的全局安装和缓存位置
- 集成测试用例_如何评估测试用例的有效性？
- 智慧消防、消防管理、事件管理、维保巡检、应急管理、培训管理、值班管理、考试管理、设备列表、机构管理、应急预案、axure原型、rp原型
- Git如何忽略已经上传的文件或文件夹？
- 渗透测试岗位面试题(渗透思路)
- 查看SAP CRM和C4C的UI technical信息 1
- C# CefSharp 可监听请求等
- 2021年最新林学类期刊JCR影响因子及分区
- 无人机倾斜摄影在矿山测量测绘中有哪些应用
- 书摘—20几岁不学应酬，30几岁只能发愁
- 白嫖JetBrains全家桶第二波与第三波
- python程序只能在安装了python环境的计算机上_Python程序只能在安装了Python环境的计算机上以源代码形式运行。...
- Flink场景练习-DataStream应用程序
- 【网络安全学习】渗透测试篇01-DVWA靶场环境搭建教程