2023年春节跨年烟花网页特效

news2024/11/26 20:26:00

粉丝朋友们大家好，我是你们的

csdn的博主：lqj_本人

哔哩哔哩：小淼前端

另外，大家也可以关注我的哔哩哔哩账号，我会不定时的发布一些有关于全栈云开发以及前端开发的详解视频+源码

1.微信小程序腾讯云开发之学生端收集数据并导出到excel表格+管理员系统：

腾讯云开发小程序之用户输入数据excel自动导出系统升级版_哔哩哔哩_bilibili

2.微信小程序腾讯云开发之仿微信、qq等实时聊天系统：

腾讯云开发小程序之实时聊天系统_哔哩哔哩_bilibili

3.uni-app框架+vue2前端框架，实现简单的练手小案例（适合新手入门）：

uni-app云开发简单小案例实现_哔哩哔哩_bilibili

本人主要已前端以及云开发的全栈开发为主，本篇博客我给大家带来了一个福利，那就是2023跨年网页特效效果！

视频演示地址：

2023全网最炫跨年祝福烟花代码_哔哩哔哩_bilibili

希望我的粉丝朋友们，可以通过本篇博客，学到一些前端开发特效的知识，以及可以通过这个快年烟花网页特效，向你喜欢的人表白吧~

祝你们表白成功哦~~

素材在本博客的最下方获取哦~

视频展示：

2023全网最炫跨年祝福烟花代码_哔哩哔哩_bilibili

效果展示：

 

代码展示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<style>
		body{margin:0;padding:0;overflow: hidden;
		height: 100vh;}

		.city{width:100%;position:fixed;bottom: 0px;z-index: 100;}
		.city img{width: 100%;height: 250px;}
		.shape{
			font-size: 20px;
			color: aliceblue;
		}
	</style>
	<title>2023年烟花代码</title>
</head>
<body onselectstart = "return false">

<div style="height:700px;overflow:hidden;">

	<canvas id='cas' style="background-color:rgba(0,5,24,1);"></canvas>
	<div class="city"><img src="img/1.webp" alt="" /></div>
	<img src="img/moon.png" alt="" id="moon" style="visibility: hidden;"/>
	<div>
		<div class="shape">新年快乐</div>
		<div class="shape">上岸成功</div>
        <div class="shape">万事如意</div>
        <div class="shape">心想事成</div>
	</div>
	
</div>
	
	<script>
		var canvas = document.getElementById("cas");
		var ocas = document.createElement("canvas");
		var octx = ocas.getContext("2d");
		var ctx = canvas.getContext("2d");
		ocas.width = canvas.width = window.innerWidth;
		ocas.height = canvas.height = 700;
		var bigbooms = [];
	
		window.onload = function(){
			initAnimate()
		}

		function initAnimate(){
			drawBg();

			lastTime = new Date();
			animate();
		}

		var lastTime;
		function animate(){
			ctx.save();
			ctx.fillStyle = "rgba(0,5,24,0.1)";
			ctx.fillRect(0,0,canvas.width,canvas.height);
			ctx.restore();


			var newTime = new Date();
            if(newTime-lastTime>10+(window.innerHeight-767)/4){
				var random = Math.random()*100>2?true:false;
				var x = getRandom(canvas.width/5 , canvas.width*4/5);
				var y = getRandom(50 , 200);
				if(random){
					var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:x , y:y});
					bigbooms.push(bigboom)
				}
				else {
					var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:canvas.width/2 , y:200} , document.querySelectorAll(".shape")[parseInt(getRandom(0, document.querySelectorAll(".shape").length))]);
					bigbooms.push(bigboom)
				}
				lastTime = newTime;
				console.log(bigbooms)
			}

			stars.foreach(function(){
				this.paint();
			})

			drawMoon();

			bigbooms.foreach(function(index){
				var that = this;
				if(!this.dead){
					this._move();
					this._drawLight();
				}
				else{
					this.booms.foreach(function(index){
						if(!this.dead) {
							this.moveTo(index);
						}
						else if(index === that.booms.length-1){
							bigbooms[bigbooms.indexOf(that)] = null;
						}
					})
				}
			});
			
			raf(animate);
		}

		function drawMoon(){
			var moon = document.getElementById("moon");
			var centerX = canvas.width-200 , centerY = 100 , width = 80;
			if(moon.complete){
				ctx.drawImage(moon , centerX , centerY , width , width )
			}
			else {
				moon.onload = function(){
					ctx.drawImage(moon ,centerX , centerY , width , width)
				}
			}
			var index = 0;
			for(var i=0;i<10;i++){
				ctx.save();
				ctx.beginPath();
				ctx.arc(centerX+width/2 , centerY+width/2 , width/2+index , 0 , 2*Math.PI);
				ctx.fillStyle="rgba(240,219,120,0.005)";
				index+=2;
				ctx.fill();
				ctx.restore();
			}
			
		}

		Array.prototype.foreach = function(callback){
			for(var i=0;i<this.length;i++){
				if(this[i]!==null) callback.apply(this[i] , [i])
			}
		}

		var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); };
 		
		canvas.onclick = function(){
			var x = event.clientX;
			var y = event.clientY;
			var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:x , y:y});
			bigbooms.push(bigboom)
		}

		var Boom = function(x,r,c,boomArea,shape){
			this.booms = [];
			this.x = x;
			this.y = (canvas.height+r);
			this.r = r;
			this.c = c;
			this.shape = shape || false;
			this.boomArea = boomArea;
			this.theta = 0;
			this.dead = false;
			this.ba = parseInt(getRandom(80 , 200));
		}
		Boom.prototype = {
			_paint:function(){
				ctx.save();
				ctx.beginPath();
				ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
				ctx.fillStyle = this.c;
				ctx.fill();
				ctx.restore();
			},
			_move:function(){
				var dx = this.boomArea.x - this.x , dy = this.boomArea.y - this.y;
				this.x = this.x+dx*0.01;
				this.y = this.y+dy*0.01;

				if(Math.abs(dx)<=this.ba && Math.abs(dy)<=this.ba){
					if(this.shape){
						this._shapBoom();
					}
					else this._boom();
					this.dead = true;
				}
				else {
					this._paint();
				}
			},
			_drawLight:function(){
				ctx.save();
				ctx.fillStyle = "rgba(255,228,150,0.3)";
				ctx.beginPath();
				ctx.arc(this.x , this.y , this.r+3*Math.random()+1 , 0 , 2*Math.PI);
				ctx.fill();
				ctx.restore();
			},
			_boom:function(){
				var fragNum = getRandom(30 , 200);
				var style = getRandom(0,10)>=5? 1 : 2;
				var color;
				if(style===1){
					color = {
						a:parseInt(getRandom(128,255)),
						b:parseInt(getRandom(128,255)),
						c:parseInt(getRandom(128,255))
					}
				}

				var fanwei = parseInt(getRandom(300, 400));
				for(var i=0;i<fragNum;i++){
					if(style===2){
						color = {
							a:parseInt(getRandom(128,255)),
							b:parseInt(getRandom(128,255)),
							c:parseInt(getRandom(128,255))
						}
					}
					var a = getRandom(-Math.PI, Math.PI);
					var x = getRandom(0, fanwei) * Math.cos(a) + this.x;
					var y = getRandom(0, fanwei) * Math.sin(a) + this.y; 
					var radius = getRandom(0 , 2)
					var frag = new Frag(this.x , this.y , radius , color , x , y );
					this.booms.push(frag);
				}
			},
			_shapBoom:function(){
				var that = this;
				putValue(ocas , octx , this.shape , 5, function(dots){
					var dx = canvas.width/2-that.x;
					var dy = canvas.height/2-that.y;
					for(var i=0;i<dots.length;i++){
						color = {a:dots[i].a,b:dots[i].b,c:dots[i].c}
						var x = dots[i].x;
						var y = dots[i].y;
						var radius = 1;
						var frag = new Frag(that.x , that.y , radius , color , x-dx , y-dy);
						that.booms.push(frag);
					}
				})
			}
		}

		function putValue(canvas , context , ele , dr , callback){
			context.clearRect(0,0,canvas.width,canvas.height);
			var img = new Image();
			if(ele.innerHTML.indexOf("img")>=0){
				img.src = ele.getElementsByTagName("img")[0].src;
				imgload(img , function(){
					context.drawImage(img , canvas.width/2 - img.width/2 , canvas.height/2 - img.width/2);
					dots = getimgData(canvas , context , dr);
					callback(dots);
				})
			}
			else {
				var text = ele.innerHTML;
				context.save();
				var fontSize =200;
				context.font = fontSize+"px 宋体 bold";
				context.textAlign = "center";
				context.textBaseline = "middle";
				context.fillStyle = "rgba("+parseInt(getRandom(128,255))+","+parseInt(getRandom(128,255))+","+parseInt(getRandom(128,255))+" , 1)";
				context.fillText(text , canvas.width/2 , canvas.height/2);
				context.restore();
				dots = getimgData(canvas , context , dr);
				callback(dots);
			}
		}

		function imgload(img , callback){
			if(img.complete){
				callback.call(img);
			}
			else {
				img.onload = function(){
					callback.call(this);
				}
			}
		}

		function getimgData(canvas , context , dr){
			var imgData = context.getImageData(0,0,canvas.width , canvas.height);
			context.clearRect(0,0,canvas.width , canvas.height);
			var dots = [];
			for(var x=0;x<imgData.width;x+=dr){
				for(var y=0;y<imgData.height;y+=dr){
					var i = (y*imgData.width + x)*4;
					if(imgData.data[i+3] > 128){
						var dot = {x:x , y:y , a:imgData.data[i] , b:imgData.data[i+1] , c:imgData.data[i+2]};
						dots.push(dot);
					}
				}
			}
			return dots;
		}

		function getRandom(a , b){
			return Math.random()*(b-a)+a;
		}


		var maxRadius = 1 , stars=[];
		function drawBg(){
			for(var i=0;i<100;i++){
				var r = Math.random()*maxRadius;
				var x = Math.random()*canvas.width;
				var y = Math.random()*2*canvas.height - canvas.height;
				var star = new Star(x , y , r);
				stars.push(star);
				star.paint()
			}

		}

		var Star = function(x,y,r){
			this.x = x;this.y=y;this.r=r;
		}
		Star.prototype = {
			paint:function(){
				ctx.save();
				ctx.beginPath();
				ctx.arc(this.x , this.y , this.r , 0 , 2*Math.PI);
				ctx.fillStyle = "rgba(255,255,255,"+this.r+")";
				ctx.fill();
				ctx.restore();
			}
		}

		var focallength = 250;
		var Frag = function(centerX , centerY , radius , color ,tx , ty){
			this.tx = tx;
			this.ty = ty;
			this.x = centerX;
			this.y = centerY;
			this.dead = false;
			this.centerX = centerX;
			this.centerY = centerY;
			this.radius = radius;
			this.color = color;
		}

		Frag.prototype = {
			paint:function(){
				ctx.save();
				ctx.beginPath();
				ctx.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);
				ctx.fillStyle = "rgba("+this.color.a+","+this.color.b+","+this.color.c+",1)";
				ctx.fill()
				ctx.restore();
			},
			moveTo:function(index){
				this.ty = this.ty+0.3;
				var dx = this.tx - this.x , dy = this.ty - this.y;
				this.x = Math.abs(dx)<0.1 ? this.tx : (this.x+dx*0.1);
				this.y = Math.abs(dy)<0.1 ? this.ty : (this.y+dy*0.1);
				if(dx===0 && Math.abs(dy)<=80){
					this.dead = true;
				}
				this.paint();
			}
		}
	</script>

</body>
</html>

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/143394.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

搭建VMware ESXi6.7（带图解）

搭建VMware ESXi6.7（带图解）

目录 VMware ESXi介绍 准备文件 安装过程 VMware ESXi介绍 VMware ESXi是什么系统&#xff1f; VMware ESXi是可直接安装在物理服务器上的强大的裸机管理系统&#xff0c;不需安装其他操作系统&#xff0c;是VMware服务器虚拟化的基础。通过直接访问并控制底层资源&#x…
阅读更多...
操作系统从入门到入土（一）之计算机系统概述

操作系统从入门到入土（一）之计算机系统概述

文章目录操作系统的基本概念1.概念2.功能和目标3.特征操作系统的发展操作系统运行环境1.处理器运行环境2.中断和异常3.系统调用系统结构操作系统的基本概念 1.概念 操作系统&#xff08;Operating System&#xff0c; OS&#xff09;是指控制和管理整个计算机系统的硬件和软件…
阅读更多...
【C语言】字符串练习，压缩字符串，提取奇偶位（每日小细节015）

【C语言】字符串练习，压缩字符串，提取奇偶位（每日小细节015）

前言&#xff1a; 欢迎打开这篇博客&#xff0c;从今天开始&#xff0c;每天和大家分享一个C语言小细节&#xff0c;不久之后还会追加C 一些常常被忽视的小细节和思想统一的编程题目是这个专栏的核心哦 虽然简单但千万别在细节处失分&#xff01;&#xff01;&#xff01;&…
阅读更多...
《高效能人士的七个习惯》

《高效能人士的七个习惯》

专注做有意义的事情。《高效能人士的七个习惯》作者史蒂芬科维&#xff0c;这是一本难得的好书&#xff0c;如果你没有的读过&#xff0c;我推荐你一定要读一下。最近在豆瓣看到一句话说&#xff1a;一定要读经典书籍&#xff0c;因为我们在生活中很难遇到伟大的人物&#xff0…
阅读更多...
V2V网络灵敏度分析(Matlab代码实现）

V2V网络灵敏度分析(Matlab代码实现）

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 灵敏度分析是研究与分析一个系统&#xff08;或模型&#xff09;的状态或输出变化对系统参数或周围条件变化的敏感程度的方法。…
阅读更多...
Axure绘制登录功能

Axure绘制登录功能

上一篇文章为大家介绍了一下登录功能的设计思路和相关的流程图&#xff0c;本篇主要带大家从0到1绘制一下B端产品的登录功能如何实现 一、功能解析 本篇主要是针对内部员工使用的B端产品&#xff0c;主要功能如下&#xff1a; ①手机号密码登录 ②忘记密码 ③记住密码 第…
阅读更多...
从0到1完成一个Vue后台管理项目（二、使用element-ui）

从0到1完成一个Vue后台管理项目（二、使用element-ui）

从0到1完成一个Vue后台管理项目&#xff08;一、创建项目&#xff09; 1.全局引入 下载element-ui cnpm i element-ui -S main.js里引入 这里需要注意的是&#xff0c;我们引入的顺序不能错&#xff0c;一定要按照我这个箭头的顺序来 使用 然后我们按照文档正常使用即可 elem…
阅读更多...
Go第 8 章：排序和查找

Go第 8 章：排序和查找

Go第 8 章&#xff1a;排序和查找 8.1 排序的基本介绍 8.2 冒泡排序的思路分析 8.3 冒泡排序实现 8.4 课后练习 要求同学们能够&#xff0c;不看老师的代码&#xff0c;可以默写冒泡排序法(笔试题) 8.5 查找 2) 请对一个有序数组进行二分查找 {1,8, 10, 89, 1000, 1234} &am…
阅读更多...
C语言之复合类型下卷（十九）（自然法则）（2023）

C语言之复合类型下卷（十九）（自然法则）（2023）

上一篇: C语言之复合类型上卷&#xff08;十八&#xff09;&#xff08;阴阳两极&#xff09; 逐梦编程&#xff0c;让中华屹立世界之巅。 简单的事情重复做,重复的事情用心做,用心的事情坚持做&#xff1b; 文章目录前言一、结构体指针二、结构体嵌套指针三、const修饰的结构…
阅读更多...
qsort函数详解以及模拟实现

qsort函数详解以及模拟实现

qsort函数详解以及模拟实现一.qsort函数是什么二.具体的使用1.参数4&#xff08;参数3在模拟实现时解释&#xff09;2.例子1.排序整形2.排序结构体三.模拟实现qsort1.参数32.模拟排序1.排整形2.排结构体一.qsort函数是什么 qsort全称为quick_sort&#xff08;快速排序&#xff…
阅读更多...
Tomcat的基本使用

Tomcat的基本使用

1, Tomcat 1.1 简介 1.1.1 什么是Web服务器 Web服务器是一个应用程序&#xff08;软件&#xff09;&#xff0c;对HTTP协议的操作进行封装&#xff0c;使得程序员不必直接对协议进行操作&#xff0c;让Web开发更加便捷。主要功能是"提供网上信息浏览服务"。 Web服…
阅读更多...
C语言rewind()函数：将文件指针重新指向文件开头

C语言rewind()函数：将文件指针重新指向文件开头

rewind()函数用于将文件指针重新指向文件的开头&#xff0c;同时清除和文件流相关的错误和eof标记&#xff0c;相当于调用fseek(stream, 0, SEEK_SET)&#xff0c;其原型如下&#xff1a; void rewind(FILE * stream); 【参数】stream为已打开文件的指针。 注意&#xff1a;准…
阅读更多...
深入理解Pytorch中的分布式训练

深入理解Pytorch中的分布式训练

作者&#xff1a;台运鹏 (正在寻找internship...)主页&#xff1a;https://yunpengtai.top鉴于网上此类教程有不少模糊不清&#xff0c;对原理不得其法&#xff0c;代码也难跑通&#xff0c;故而花了几天细究了一下相关原理和实现&#xff0c;欢迎批评指正&#xff01;关于此部…
阅读更多...
【Python • 字符串】巧用python字符串切片

【Python • 字符串】巧用python字符串切片

文章目录前言字符串切片常用用法理解一个字符串逆向下标的字符串字符串切片截取下标a到b的字符串取下标a以后的所有字符串取下标a以前的所有字符串间隔n个字符取字符串字符串逆序输出从下标a的字符开始逆序取字符串逆序输出从b到a的字符串逆序间隔一个字符串输出总结前言 在py…
阅读更多...
站酷基于服务网格ASM的生产实践

站酷基于服务网格ASM的生产实践

作者&#xff1a;服务网格ASM 背景介绍 站酷&#xff08;ZCOOL&#xff09;2006 年 8 月创立于北京&#xff0c;深耕设计领域多年&#xff0c;聚集了 1500 万设计师、摄影师、插画师、艺术家、创意人&#xff0c;在设计创意群体中具有一定的影响力与号召力。站酷在创立之初&am…
阅读更多...
企业数字化转型“核心方法论”

企业数字化转型“核心方法论”

一、什么是数字化转型&#xff1f;数字化转型是近年来&#xff0c;很多企业老生常谈的话题。那么听了这么多数字化转型的故事&#xff0c;你对其真正了解多少呢&#xff1f;下面织信就数字化转型的背景、以及多个示例的讲解&#xff0c;带你深入理解“数字化转型”这一概念。&a…
阅读更多...
构建自组织团队，让敏捷管理更好地落地

构建自组织团队，让敏捷管理更好地落地

敏捷开发是以用户的需求为核心&#xff0c;通过不断迭代、小步快跑、循序渐进的方法进行软件产品的研发&#xff0c;在迭代研发过程中的产品都需要经过测试&#xff0c;具备可视化、可集成和可运行使用的特征。 在团队方面&#xff0c;敏捷开发倡导团队协作&#xff0c;强调个…
阅读更多...
React（coderwhy）- 05(redux)

React（coderwhy）- 05(redux)

Redux的核心思想 理解JavaScript纯函数 ◼ 函数式编程中有一个非常重要的概念叫纯函数&#xff0c;JavaScript符合函数式编程的范式&#xff0c;所以也有纯函数的概念&#xff1b;  在react开发中纯函数是被多次提及的&#xff1b;  比如react中组件就被要求像是一个纯函数…
阅读更多...
数据库迁移到达梦的一些记录

数据库迁移到达梦的一些记录

1 达梦迁移工具 参考MySQL迁移到达梦-超出定义长度问题 使用你设置的配置&#xff0c;即可&#xff0c;因为达梦默认采用按照字节存储&#xff0c;mysql是按照字符存储&#xff0c;故而他认为越界了。 使用3.5G数据&#xff0c;342张表进行数据迁移验证 第一此执行,结果 任务…
阅读更多...
linux安装mysql以及允许外网访问mysql

linux安装mysql以及允许外网访问mysql

下载社区版本 下载最新版 下载历史版本 点击 Archives 文件上传云服务器 /opt/mysql 存放目录随便 添加用户组 groupadd mysql useradd -r -g mysql mysql删除mariadb rpm -qa|grep mariadbrpm -e --nodeps mariadb-libs安装 解压tar -xvf mysql-5.7.20-1.el7.x86_64…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023