HTML烟花特效,除夕快到了,把它收藏下来,过年和最重要的她一起看烟花。
文章目录
- 前言
- 一、效果图
- 二、操作步骤
- 第一步
- 第二步
- 第三步
- 第四步
- 第五步
- 第六步
- 源码
前言
最近随着电视剧《点燃我温暖你》的火热播出,剧中帅气学霸李洵的炫酷爱心代码也迅速火出了圈,爱心素材异常火爆,烟花也异常火爆,毕竟在这绿色生态发展下,烟花也越来越少~,快过年了,把它收藏下来,除夕和最重要的她一起看烟花。
一、效果图
二、操作步骤
第一步
复制文章底部源码
第二步
在桌面右键新建文本文档
第三步
打开新建文本,把复制的源码粘贴进去
第四步
关闭保存新建文本文档,右键重命名
后缀txt改为html
出现下列弹框点击是
第五步
打开文件
第六步
通过聊天软件把他发送给自己最重要的人,打开之后点击会有音乐。
源码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>烟花</title><style>html,body {margin: 0px;width: 100%;height: 100%;overflow: hidden;background: #000;}span,ul {color: #fff;}</style></head><body><canvas id="canvas" style="position:absolute;width:100%;height:100%;z-index:8888"></canvas><canvas style="position:absolute;width:100%;height:100%;z-index:9999" class="canvas"></canvas><script>function initVars() {pi = Math.PI;ctx = canvas.getContext("2d");canvas.width = canvas.clientWidth;canvas.height = canvas.clientHeight;cx = canvas.width / 2;cy = canvas.height / 2;playerZ = -25;playerX = playerY = playerVX = playerVY = playerVZ = pitch = yaw = pitchV = yawV = 0;scale = 600;seedTimer = 0;seedInterval = 5, seedLife = 100;gravity = .02;seeds = new Array();sparkPics = new Array();s = "https://cantelope.org/NYE/";for (i = 1; i <= 10; ++i) {sparkPic = new Image();sparkPic.src = s + "spark" + i + ".png";sparkPics.push(sparkPic);}sparks = new Array();pow1 = new Audio(s + "pow1.ogg");pow2 = new Audio(s + "pow2.ogg");pow3 = new Audio(s + "pow3.ogg");pow4 = new Audio(s + "pow4.ogg");frames = 0;}function rasterizePoint(x, y, z) {var p, d;x -= playerX;y -= playerY;z -= playerZ;p = Math.atan2(x, z);d = Math.sqrt(x * x + z * z);x = Math.sin(p - yaw) * d;z = Math.cos(p - yaw) * d;p = Math.atan2(y, z);d = Math.sqrt(y * y + z * z);y = Math.sin(p - pitch) * d;z = Math.cos(p - pitch) * d;var rx1 = -1000,ry1 = 1,rx2 = 1000,ry2 = 1,rx3 = 0,ry3 = 0,rx4 = x,ry4 = z,uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1);if (!uc) return {x: 0,y: 0,d: -1};var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc;var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc;if (!z) z = .000000001;if (ua > 0 && ua < 1 && ub > 0 && ub < 1) {return {x: cx + (rx1 + ua * (rx2 - rx1)) * scale,y: cy + y / z * scale,d: Math.sqrt(x * x + y * y + z * z)};} else {return {x: cx + (rx1 + ua * (rx2 - rx1)) * scale,y: cy + y / z * scale,d: -1};}}function spawnSeed() {seed = new Object();seed.x = -50 + Math.random() * 100;seed.y = 25;seed.z = -50 + Math.random() * 100;seed.vx = .1 - Math.random() * .2;seed.vy = -1.5;seed.vz = .1 - Math.random() * .2;seed.born = frames;seeds.push(seed);}function splode(x, y, z) {t = 5 + parseInt(Math.random() * 150);sparkV = 1 + Math.random() * 2.5;type = parseInt(Math.random() * 3);switch (type) {case 0:pic1 = parseInt(Math.random() * 10);break;case 1:pic1 = parseInt(Math.random() * 10);do {pic2 = parseInt(Math.random() * 10);} while (pic2 == pic1);break;case 2:pic1 = parseInt(Math.random() * 10);do {pic2 = parseInt(Math.random() * 10);} while (pic2 == pic1);do {pic3 = parseInt(Math.random() * 10);} while (pic3 == pic1 || pic3 == pic2);break;}for (m = 1; m < t; ++m) {spark = new Object();spark.x = x;spark.y = y;spark.z = z;p1 = pi * 2 * Math.random();p2 = pi * Math.random();v = sparkV * (1 + Math.random() / 6)spark.vx = Math.sin(p1) * Math.sin(p2) * v;spark.vz = Math.cos(p1) * Math.sin(p2) * v;spark.vy = Math.cos(p2) * v;switch (type) {case 0:spark.img = sparkPics[pic1];break;case 1:spark.img = sparkPics[parseInt(Math.random() * 2) ? pic1 : pic2];break;case 2:switch (parseInt(Math.random() * 3)) {case 0:spark.img = sparkPics[pic1];break;case 1:spark.img = sparkPics[pic2];break;case 2:spark.img = sparkPics[pic3];break;}break;}spark.radius = 25 + Math.random() * 50;spark.alpha = 1;spark.trail = new Array();sparks.push(spark);}switch (parseInt(Math.random() * 4)) {case 0:pow = new Audio(s + "pow1.ogg");break;case 1:pow = new Audio(s + "pow2.ogg");break;case 2:pow = new Audio(s + "pow3.ogg");break;case 3:pow = new Audio(s + "pow4.ogg");break;}d = Math.sqrt((x - playerX) * (x - playerX) + (y - playerY) * (y - playerY) + (z - playerZ) * (z - playerZ));pow.volume = 1.5 / (1 + d / 10);pow.play();}function doLogic() {if (seedTimer < frames) {seedTimer = frames + seedInterval * Math.random() * 10;spawnSeed();}for (i = 0; i < seeds.length; ++i) {seeds[i].vy += gravity;seeds[i].x += seeds[i].vx;seeds[i].y += seeds[i].vy;seeds[i].z += seeds[i].vz;if (frames - seeds[i].born > seedLife) {splode(seeds[i].x, seeds[i].y, seeds[i].z);seeds.splice(i, 1);}}for (i = 0; i < sparks.length; ++i) {if (sparks[i].alpha > 0 && sparks[i].radius > 5) {sparks[i].alpha -= .01;sparks[i].radius /= 1.02;sparks[i].vy += gravity;point = new Object();point.x = sparks[i].x;point.y = sparks[i].y;point.z = sparks[i].z;if (sparks[i].trail.length) {x = sparks[i].trail[sparks[i].trail.length - 1].x;y = sparks[i].trail[sparks[i].trail.length - 1].y;z = sparks[i].trail[sparks[i].trail.length - 1].z;d = ((point.x - x) * (point.x - x) + (point.y - y) * (point.y - y) + (point.z - z) * (point.z - z));if (d > 9) {sparks[i].trail.push(point);}} else {sparks[i].trail.push(point);}if (sparks[i].trail.length > 5) sparks[i].trail.splice(0, 1);sparks[i].x += sparks[i].vx;sparks[i].y += sparks[i].vy;sparks[i].z += sparks[i].vz;sparks[i].vx /= 1.075;sparks[i].vy /= 1.075;sparks[i].vz /= 1.075;} else {sparks.splice(i, 1);}}p = Math.atan2(playerX, playerZ);d = Math.sqrt(playerX * playerX + playerZ * playerZ);d += Math.sin(frames / 80) / 1.25;t = Math.sin(frames / 200) / 40;playerX = Math.sin(p + t) * d;playerZ = Math.cos(p + t) * d;yaw = pi + p + t;}function rgb(col) {var r = parseInt((.5 + Math.sin(col) * .5) * 16);var g = parseInt((.5 + Math.cos(col) * .5) * 16);var b = parseInt((.5 - Math.sin(col) * .5) * 16);return "#" + r.toString(16) + g.toString(16) + b.toString(16);}function draw() {ctx.clearRect(0, 0, cx * 2, cy * 2);ctx.fillStyle = "#ff8";for (i = -100; i < 100; i += 3) {for (j = -100; j < 100; j += 4) {x = i;z = j;y = 25;point = rasterizePoint(x, y, z);if (point.d != -1) {size = 250 / (1 + point.d);d = Math.sqrt(x * x + z * z);a = 0.75 - Math.pow(d / 100, 6) * 0.75;if (a > 0) {ctx.globalAlpha = a;ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);}}}}ctx.globalAlpha = 1;for (i = 0; i < seeds.length; ++i) {point = rasterizePoint(seeds[i].x, seeds[i].y, seeds[i].z);if (point.d != -1) {size = 200 / (1 + point.d);ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);}}point1 = new Object();for (i = 0; i < sparks.length; ++i) {point = rasterizePoint(sparks[i].x, sparks[i].y, sparks[i].z);if (point.d != -1) {size = sparks[i].radius * 200 / (1 + point.d);if (sparks[i].alpha < 0) sparks[i].alpha = 0;if (sparks[i].trail.length) {point1.x = point.x;point1.y = point.y;switch (sparks[i].img) {case sparkPics[0]:ctx.strokeStyle = "#f84";break;case sparkPics[1]:ctx.strokeStyle = "#84f";break;case sparkPics[2]:ctx.strokeStyle = "#8ff";break;case sparkPics[3]:ctx.strokeStyle = "#fff";break;case sparkPics[4]:ctx.strokeStyle = "#4f8";break;case sparkPics[5]:ctx.strokeStyle = "#f44";break;case sparkPics[6]:ctx.strokeStyle = "#f84";break;case sparkPics[7]:ctx.strokeStyle = "#84f";break;case sparkPics[8]:ctx.strokeStyle = "#fff";break;case sparkPics[9]:ctx.strokeStyle = "#44f";break;}for (j = sparks[i].trail.length - 1; j >= 0; --j) {point2 = rasterizePoint(sparks[i].trail[j].x, sparks[i].trail[j].y, sparks[i].trail[j].z);if (point2.d != -1) {ctx.globalAlpha = j / sparks[i].trail.length * sparks[i].alpha / 2;ctx.beginPath();ctx.moveTo(point1.x, point1.y);ctx.lineWidth = 1 + sparks[i].radius * 10 / (sparks[i].trail.length - j) / (1 + point2.d);ctx.lineTo(point2.x, point2.y);ctx.stroke();point1.x = point2.x;point1.y = point2.y;}}}ctx.globalAlpha = sparks[i].alpha;ctx.drawImage(sparks[i].img, point.x - size / 2, point.y - size / 2, size, size);}}}function frame() {if (frames > 100000) {seedTimer = 0;frames = 0;}frames++;draw();doLogic();requestAnimationFrame(frame);}window.addEventListener("resize", () => {canvas.width = canvas.clientWidth;canvas.height = canvas.clientHeight;cx = canvas.width / 2;cy = canvas.height / 2;});initVars();frame();</script></body></html>
HTML烟花特效,除夕快到了,把它收藏下来,过年和最重要的她一起看烟花。相关推荐
- 纯js代码,制作炫酷烟花特效。快给你的朋友瞧瞧吧!
首先我们来看看烟花最终实现的效果 是不是很有意思呢,接下来就来讲解实现烟花特效所需的步骤: 实现步骤: 首先我们将html与body填满整个屏幕 <style>html,body{pa ...
- 烟花特效-第14届蓝桥杯STEMA测评Scratch真题精选
[导读]:超平老师的<Scratch蓝桥杯真题解析100讲>已经全部完成,后续会不定期解读蓝桥杯真题,这是Scratch蓝桥杯真题解析第111讲. 蓝桥杯选拔赛现已更名为STEMA,即ST ...
- 除夕跨年烟花特效[原创]
除夕跨年烟花特效[原创] 这是一个纯javascript除夕跨年烟花特效 体验入口:除夕跨年烟花 开源地址: https://gitee.com/Hauiteut/Spanning2022 烨拓科讯技 ...
- 快过年了,用五种不同的JS特效带你看烟花
今天给大家带来几个好看的基于 HTML+CSS+JS 的烟花特效 雪花. 樱花 . 浪漫贺卡 以及 圣诞树 我前段时间刚做过,感兴趣的也可以看看我前几期的博客: 雪花:https://haiyong. ...
- html加css加js制作的烟花,js实现烟花特效
本文实例为大家分享了js实现烟花特效的具体代码,供大家参考,具体内容如下 1.概述 在网页背景中实现鼠标点击出现模拟烟花爆炸的特效 2.思路 1.获取鼠标点击位置,底端创建烟花节点. 2.为烟花添加c ...
- HTML5七夕情人节表白网页制作【HTML5庆祝生日蛋糕烟花特效】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- CSS3实现烟花特效 --web前端
烟花特效,比较简单,直接贴代码了-- <!DOCTYPE html><html lang="en"><head> <meta charse ...
- 对一些常见的HTML5特效进行整理和运行(有趣特效,烟花特效,爱心特效,炫酷特效)
有趣特效 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en&quo ...
- canvas 烟花特效
特效代码,本特效来自脚本之家,我将其去除了jQuery,还有一些其他的更改 <!DOCTYPE HTML> <html><head><title>Can ...
最新文章
- ACMNO.19 C语言-对角求和 求一个3×3矩阵对角线元素之和。 输入 矩阵 输出 主对角线 副对角线 元素和 样例输入 1 2 3 1 1 1 3 2 1 样例输出 3 7
- 一波三折用OSD部署Vista中文企业版(下):SMS2003系列之九
- Redis自定义动态字符串(sds)模块(二)
- 《剑指offer》第九题(用两个栈实现队列)
- 200822C阶段一文件
- KTV歌曲推荐-深入浅出协同过滤
- Linux C 学习 单向链表
- java 不识别enum_Java enum关键字不识别的快速解决办法
- 数学物理方法pdf_中考状元笔记九科(语文+数学+物理+化学+英语+历史+地理+政治+生物)(高清PDF);...
- elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)...
- 推广帖:超好用的mac下shell工具 finalshell --xshell替代,mac ssh客户端
- VS2015密钥 VS2017密钥
- 省团团小程序被微信封禁
- python 残差图_python 残差
- 数字化时代的数据安全与治理
- mmdetection--自定义数据集
- Redis集群和应用——02
- 易语言的按钮事件(破解小技巧)
- BGP协议学习笔记——BGP基础
- windows无法打开添加打印机_如何删除打印机
热门文章
- .ne和php区别,深度剖析曝光松下吹风机ne62与wne6c哪个好?有什么区别?真实评测体验曝光...
- 23中设计模式之工厂模式
- 相遇是春风十里的任意门
- 村田贴片电容怎么区分电压
- 【左偏树】【bzoj 2333】: [SCOI2011]棘手的操作
- MVC-03 控制器(2)
- 实战篇-OpenSSL之TripleDES加密算法-CFB64模式
- Unix/Linux编程:SIGCHLD信号
- 吃鸡2019年5月7日服务器维护,《绝地求生:刺激战场》5月7日为什么停机维护,或将更名《和平精英》_蚕豆网新闻...
- NtripShare GNSS系列软件家族