【用三大件写出的开门烟花特效】

这篇具有很好参考价值的文章主要介绍了【用三大件写出的开门烟花特效】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

又到了一年一度的春节时期啦!昨天呢是北方的小年,今天是南方的小年,看到大家可以愉快的放烟花,过大年很是羡慕呀!辞旧岁,贺新春,今年我呀要放烟花,过春节!🧨

这个特效简单的使用了前端三件套即可完成,html,js,css,canvas整体效果如下GIF图所示(码内隐藏特殊变量,找到有惊喜!)

前端开门特效,前端,html,javascript,Powered by 金山文档
背景音乐是《China-E》个人感觉很有新年的感觉,整个China系列的歌曲都很nice,该特效的寓意就是开门大吉,辞旧迎新,2023年的大门向你敞开,新的一年想你招手,小兔子抱着锦鲤,也预示着吉祥,山鱼在这里祝大家前兔无量,大展宏兔!

就是开心,就是玩,就是兔个吉利!,话不多说上代码!

<body>
    <!-- 依旧是简洁的html代码 -->
    <canvas id="mycanvas"></canvas>

    <div id="box">
        <button type="button" id="unmuteButton">开启新年音乐</button>
        <button type="button" id="unmuteButton2">关闭新年音乐</button>
        <video id="video" muted autoplay src="./audio/新年音乐.mp3" loop></video>
    </div>
</body>

比较多的css代码,所以单独放在了一个文件下,如果用的时候出现图片丢失的问题,可以看看路径写对了没

/* 如果单独放记得去掉style标签哦 */
<style>
* {
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
    margin: 0;
    cursor: pointer;
    font-size: 30px;
    background: url("../img/辞旧岁贺新春兔年.png");
    background-size: 100% 100%;
}

#unmuteButton {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    font-size: 10px;
    font-family: "STHupo";
    width: 80px;
    height: 30px;
    border: 1px solid red;
    background-color: rgb(255, 115, 0);
    border-radius: 10%;
}

#unmuteButton2 {
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 120px;
    font-size: 10px;
    font-family: "STHupo";
    width: 80px;
    height: 30px;
    border: 1px solid red;
    background-color: rgb(255, 115, 0);
    border-radius: 10%;
}

#video {
    position: absolute;
    top: -100000;
    left: -100000;
}

#box {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#box::before,
#box::after {
    content: '';
    z-index: 99;
    margin-top: -37px;
    float: left;
    width: 50%;
    height: 1000px;
    background: url("../img/兔子2023.png") no-repeat;
    transition: .4s;
}

#box::before {
    float: left;
    background-position: -220px 37px;
}

#box::after {
    float: right;
    background-position: -210px;
}

#box:hover::before {
    transform: translateX(-100%)
}

#box:hover::after {
    transform: translateX(100%)
}

/* 去除滚动条 */
body::-webkit-scrollbar {
    width: 0 !important
}
</style>

比比比比较多的js代码,注意同上文章来源地址https://www.toymoban.com/news/detail-811983.html

// 烟花生成
window.requestAnimationFrame = (function () {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000)
        }
})();
// 获取画布
var area = document.getElementById("mycanvas");
area.width = document.documentElement.clientWidth;
area.height = document.documentElement.clientHeight;

var ctx = area.getContext("2d");

hue = 120;
timerTick = 0;
timerTotal = 5;
fireworks = [];
particles = [];

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

function distans(sx, sy, tx, ty) {
    var xdistan = sx - tx;
    var ydistan = sy - ty;
    return Math.sqrt((Math.pow(xdistan, 2) + Math.pow(ydistan, 2)));
}

function Firework(sx, sy, tx, ty) {
    this.x = sx;
    this.y = sy;
    this.sx = sx;
    this.sy = sy;
    this.tx = tx;
    this.ty = ty;

    this.targetDistances = distans(sx, sy, tx, ty);

    this.distancesc = 0;

    this.shanyu = [];
    this.shanyucount = 3;
    while (this.shanyucount--) {
        this.shanyu.push([this.x, this.y]);
    }

    this.angle = Math.atan2(ty - sy, tx - sx);
    this.speed = 2;
    this.jiasudu = 1.05;
    this.brightness = random(50, 70);
    this.targetRad = 5;
}

Firework.prototype.update = function (index) {
    this.shanyu.pop();
    this.shanyu.push([this.x, this.y]);

    if (this.targetRad < 8) {
        this.targetRad += 0.3;
    } else {
        this.targetRad = 1;
    }

    this.speed *= this.jiasudu;
    var vx = Math.cos(this.angle) * this.speed;
    var vy = Math.sin(this.angle) * this.speed;

    this.distancesc = distans(this.sx, this.sy, this.x + vx, this.y + vy);

    if (this.distancesc >= this.targetDistances) {

        createparticals(this.tx, this.ty);

        fireworks.splice(index, 1)
    } else {
        this.x += vx;
        this.y += vy;
    }
}


Firework.prototype.draw = function () {
    ctx.beginPath();

    ctx.moveTo(this.shanyu[this.shanyu.length - 1][0], this.shanyu[this.shanyu.length - 1][1]);

    ctx.lineTo(this.x, this.y);

    ctx.strokeStyle = 'hsl(' + hue + ',100%,' + this.brightness + '%)';
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(this.tx, this.ty, this.targetRad, 0, Math.PI * 2);
    ctx.stroke();
}

function Particle(x, y) {
    this.x = x;
    this.y = y;
    this.shanyu = [];
    this.shanyucount = 10;
    while (this.shanyucount--) {
        this.shanyu.push([this.x, this.y]);
    }

    this.angle = random(0, 2 * Math.PI);
    this.speed = random(1, 10);
    this.mocal = 0.95;
    this.gravity = 0.98;
    this.hue = random(hue - 20, hue + 20);
    this.brightness = random(50, 80);
    this.alpha = 1;
    this.decay = random(0.015, 0.03);
}

Particle.prototype.update = function (index) {
    this.shanyu.pop();
    this.shanyu.unshift([this.x, this.y]);
    this.speed *= this.mocal;
    this.x += Math.cos(this.angle) * this.speed;
    this.y += Math.sin(this.angle) * this.speed + this.gravity;
    this.alpha -= this.decay;
    if (this.alpha <= this.decay) {
        particles.splice(index, 1)
    }
}
Particle.prototype.draw = function () {
    ctx.beginPath();
    ctx.moveTo(this.shanyu[this.shanyu.length - 1][0], this.shanyu[this.shanyu.length - 1][1]);
    ctx.lineTo(this.x, this.y);
    ctx.strokeStyle = 'hsl(' + hue + ',100%,' + this.brightness + '%)';
    ctx.stroke();
}

function createparticals(x, y) {
    var particalcount = 500;
    while (particalcount--) {
        particles.push(new Particle(x, y))
    }
}

var clientw = document.documentElement.clientWidth;
var clienth = document.documentElement.clientHeight;

function loop() {
    requestAnimationFrame(loop);
    hue += 0.5;
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillRect(0, 0, clientw, clienth);
    ctx.fillStyle = 'rgb(0,0,0,0.5)';
    ctx.globalCompositeOperation = 'lighter';
    var i = fireworks.length;
    while (i--) {
        fireworks[i].draw();
        fireworks[i].update(i);
    }
    var i = particles.length;
    while (i--) {
        particles[i].draw();
        particles[i].update(i);
    }
    if (timerTick >= timerTotal) {
        fireworks.push(new Firework(clientw / 2, clienth, random(0, clientw), random(0, clienth)));
        timerTick = 0;
    } else {
        timerTick++;
    }
}
window.οnlοad = loop();
window.onload = function starttime() {
    ptimer = setTimeout(starttime, 1000);
}
// 音乐控制
unmuteButton.addEventListener('click', function () {
    video.muted = false;
});
unmuteButton2.addEventListener('click', function () {
    video.muted = true;
});
结束喽,下一篇新春特效就是下一年喽!
点赞:您的赞赏是我前进的动力! 👍
收藏:您的支持我是创作的源泉! ⭐
评论:您的建议是我改进的良药! ✍
山鱼的个人社区:欢迎大家加入我的个人社区—— 山鱼社区

到了这里,关于【用三大件写出的开门烟花特效】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ❤️创意网页:制作一个绚丽的烟花效果(HTML、CSS和JavaScript实现)

    ✨ 博主: 命运之光 🌸 专栏: Python星辰秘典 🐳 专栏: web开发(简单好用又好看) ❤️ 专栏: Java经典程序设计 ☀️ 博主的其他文章: 点击进入博主的主页 前言: 欢迎踏入我的Web项目专栏,一段神奇而令人陶醉的数字世界! 🌌 在这里,我将带您穿越时空,揭开属于

    2024年02月17日
    浏览(82)
  • HTML JavaScript 数字变化特效

    案例一:上下滚动 案例二:本身变化

    2024年01月22日
    浏览(38)
  • 超好看的前端特效HTML特效、CSS特效、JS特效(第一期)

    1. 粒子组成文字动画特效 文件组成: base.css demo.css bcg.jpg demo.js demo.scss index.html 2. 爱心表白特效 文件组成: heart.svg index.html 3. 爱心跟随鼠标 index.html 4. 满屏漂浮爱心 index.html 5. 黑客帝国矩阵雨 index.html 6. 2024新年快乐动画特效 文件目录: style.css script.js index.html 7. 表白特效

    2024年02月19日
    浏览(51)
  • html、css、javascript简单三剑客实现樱花飘落\雪花飘落特效汇总

    素材来源于网络稍作修改 侵删 如果觉得复制下面运行有问题或者嫌麻烦 可以直接下载源代码 欢迎fork、star 预览 话不多说,直接上代码 预览 预览

    2024年02月14日
    浏览(72)
  • Python烟花代码,用Python制作一个烟花特效

    Python实现浪漫的烟花特效 现在很多地方都不能放烟花了,既然看不到, 那作为程序猿的我们还不能自己用代码做一个吗? 今天就带大家用代码做一个烟花特效吧。 pygame介绍 关于Pygame的基本信息,pygame是什么,谁会被Pygame吸引,并且在哪里找到它。 Pygame是被设计用来写游戏

    2024年02月08日
    浏览(48)
  • Unity烟花特效实现(附源码)

    朋友过生,不知道送什么礼物,就想着用自己所学知识做个特效当礼物吧,嘿。 主要参考了 这位up的视频 ,感谢 https://github.com/hahahappyboy/UnityProjects/tree/main/%E7%83%9F%E8%8A%B1(%E7%B2%92%E5%AD%90%E7%B3%BB%E7%BB%9F) 主要就是1个主烟花粒子系统带3个子粒子系统,这三个小的粒子系统分别是拖

    2024年02月08日
    浏览(58)
  • 〖大前端 - 基础入门三大核心之JS篇㉓〗- JavaScript 的「数组」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月04日
    浏览(70)
  • python和pygame实现烟花特效

    新年来临之际,来一个欢庆新年烟花祝贺,需要安装使用第三方库pygame,关于Python中pygame游戏模块的安装使用可见 https://blog.csdn.net/cnds123/article/details/119514520 效果图及源码 先看效果图: 源码如下: pygame在屏幕上显示字体的方法说明 使用 pygame.font.Font 函数来设置字体和大小,

    2024年02月04日
    浏览(111)
  • 前端:运用html+css+js模仿京东上商品图片区域放大特效

    1. 前言 最近在网页端浏览京东上的商品时,觉得上面的那张gif图片上实现的特效不错,于是自己打算使用html+css+js技术来实现一下上述特效效果,我的实效果如下: 2. 前端界面 主要使用到浮动、绝对定位、相对定位等知识,不了解这部分知识点的读者可以先去了解了解,再

    2024年02月16日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包