用html画一个烟花特效

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>烟花特效</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesome.min.css"><link rel="stylesheet" href="./style.css">
</head>
<body><!-- 文字部分 --><canvas></canvas><h1>202<span class="pen">4</span> 新年快乐😃</h1><!-- partial --><script src="./script.js"></script>
</body>
</html>
var ctx = document.querySelector('canvas').getContext('2d')
ctx.canvas.width = window.innerWidth
ctx.canvas.height = window.innerHeightvar sparks = []
var fireworks = []
var i = 20; while(i--) {fireworks.push(new Firework(Math.random()*window.innerWidth, window.innerHeight*Math.random()))
}render()
function render() {setTimeout(render, 1000/60)ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)for(var firework of fireworks) {if(firework.dead) continuefirework.move()firework.draw()}for(var spark of sparks) {if(spark.dead) continuespark.move()spark.draw()}if(Math.random() < 0.05) {fireworks.push(new Firework())}
}function Spark(x, y, color) {this.x = xthis.y = ythis.dir = Math.random() * (Math.PI*2)this.dead = falsethis.color = colorthis.speed = Math.random() * 3 + 3;this.walker = new Walker({ radius: 20, speed: 0.25 })this.gravity = 0.25this.dur = this.speed / 0.1this.move = function() {this.dur--if(this.dur < 0) this.dead = trueif(this.speed < 0) returnif(this.speed > 0) this.speed -= 0.1var walk = this.walker.step()this.x += Math.cos(this.dir + walk) * this.speedthis.y += Math.sin(this.dir + walk) * this.speedthis.y += this.gravitythis.gravity += 0.05}this.draw = function() {drawCircle(this.x, this.y, 3, this.color)}
}function Firework(x, y) {this.xmove = new Walker({radius: 10, speed: 0.5})this.x = x || Math.random() * ctx.canvas.widththis.y = y || ctx.canvas.heightthis.height = Math.random()*ctx.canvas.height/2this.dead = falsethis.color = randomColor()this.move = function() {this.x += this.xmove.step()if(this.y > this.height) this.y -= 1; else this.burst()}this.draw = function() {drawCircle(this.x, this.y, 1, this.color)}this.burst = function() {this.dead = truevar i = 100; while(i--) sparks.push(new Spark(this.x, this.y, this.color))}
}function drawCircle(x, y, radius, color) {color = color || '#FFF'ctx.fillStyle = colorctx.fillRect(x-radius/2, y-radius/2, radius, radius)
}function randomColor(){return ['#93c47d','#a4c2f4','#b4a7d6','#c27ba0','#f6b26b', '#ffd966'][Math.floor(Math.random() * 6)];
}function Walker(options){this.step = function(){this.direction = Math.sign(this.target) * this.speedthis.value += this.directionthis.target? this.target -= this.direction: (this.value)? (this.wander) ? this.target = this.newTarget() : this.target = -this.value: this.target = this.newTarget()  return this.direction}this.newTarget = function() {return Math.round(Math.random()*(this.radius*2)-this.radius)}this.start = 0this.value = 0this.radius = options.radiusthis.target = this.newTarget()this.direction = Math.sign(this.target)this.wander = options.wanderthis.speed = options.speed || 1
}
html, body {padding: 0px;margin: 0px;background: #222;font-family: 'Karla', sans-serif;color: #fff;height: 100%;overflow: hidden;
}h1 {z-index: 1000;position: fixed;top: 50%;left: 50%;transform: translateX(-50%) translateY(-100%);font-size: 58px;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;border: 2px solid #fff;padding: 7.5px 15px;background: rgba(0, 0, 0, 0.5);border-radius: 3px;overflow: hidden;
}span.pen {position: relative;display: inline-block;animation: drop 0.75s;
}canvas {width: 100%;height: 100%;
}@keyframes drop {0% {transform: translateY(-100px);opacity: 0;}90% {opacity: 1;transform: translateY(10px);}100% {transform: translateY(0px);}
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue3从其他页面跳转页面头部组件菜单el-menu菜单高亮

主要代码 import { ref, onMounted, watch } from vue; const activeIndex ref("/"); const route useRoute();onMounted(() > {updateActiveMenu(); });watch(() > route.path, updateActiveMenu);function updateActiveMenu() {// 根据路由更新activeMenu…

【vue3学习笔记(一)】vue3简介;使用vue-cli创建工程;使用vite创建工程;分析工程结构;安装开发者工具

尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 对应课程136-140节 课程 P136节 《vue3简介》笔记 课程 P137节 《使用vue-cli创建工程》笔记 官方文档&#xff1a; https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create官方文档地址 查看vue-cli版本&#x…

git配置密钥

要配置 Git 密钥&#xff0c;可以按照以下步骤进行操作&#xff1a; 1.生成密钥&#xff1a;首先&#xff0c;在终端或命令提示符中运行以下命令生成密钥对&#xff1a; ssh-keygen -t rsa -b 4096 -C "dengweng-pulse.net"这将生成一个 RSA 密钥对&#xff0c;其中…

课堂行为动作识别数据集

一共8884张图片 xml .txt格式都有 Yolo可直接训练 已跑通 动作类别一共8类。 全部为教室监控真实照片&#xff0c;没有网络爬虫滥竽充数的图片&#xff0c;可直接用来训练。以上图片均一一手工标注&#xff0c;标签格式为VOC格式。适用于YOLO算法、SSD算法等各种目标检测算法…

http模块—http请求练习

题目要求&#xff1a;搭建如下http服务&#xff1a; 1.当浏览器向我们的服务器发送请求时&#xff0c;当请求类型是get请求&#xff0c;请求的url路径地址是/login。响应体结果是登录页面 2.当浏览器向我们的服务器发送请求时&#xff0c;当请求类型是get请求&#xff0c;请求…

【FIneBI可视化工具的使用】

前言&#xff1a; &#x1f49e;&#x1f49e;大家好&#xff0c;书生♡&#xff0c;今天主要和大家分享一下可视化的工具FineBI的详细使用,希望对大家有所帮助。感谢大家关注点赞。 &#x1f49e;&#x1f49e;前路漫漫&#xff0c;希望大家坚持下去&#xff0c;不忘初心&…

【解决】CameraPath3 事件回调异常

开发平台&#xff1a;Unity 2021.3.7f1c1 编程平台&#xff1a;Visual Studio 2022 编程语言&#xff1a;CSharp 6.0 三方工具&#xff1a;CameraPath3   工具简述 在 2019年官方停止版本维护&#xff0c;不再支持 URP 等新版本。而实际业务要求继续使用该开发工具。   问题…

0100__利用VisualStudio进行Debug和Release版本的控制

C/C -代码生成-运行库&#xff0c;Debug选择MDd或者MTd&#xff0c;根据静态编译还是动态编译来确定&#xff0c;Release模式则选择MD或者MT。 利用VisualStudio进行Debug和Release版本的控制_visual studio release-CSDN博客

Java代码基础算法练习-求一个三位数的各位数字之和-2024.03.27

任务描述&#xff1a; 输入一个正整数n&#xff08;取值范围&#xff1a;100<n<1000&#xff09;&#xff0c;然后输出每位数字之和 任务要求&#xff1a; 代码示例&#xff1a; package M0317_0331;import java.util.Scanner;public class m240327 {public static voi…

瓦楞板一体化污水处理设备怎么选型

瓦楞板一体化污水处理设备的选型是一个重要而复杂的过程。在选择适合的设备前&#xff0c;我们需要考虑以下几个因素&#xff1a;污水性质、处理效果、处理能力、设备性能和成本等。本文将从这几个方面为您介绍瓦楞板一体化污水处理设备的选型方法。 首先&#xff0c;污水性质是…

计算机网络基础——网络安全/ 网络通信介质

chapter3 网络安全与管理 1. 网络安全威胁 网络安全&#xff1a;目的就是要让网络入侵者进不了网络系统&#xff0c;及时强行攻入网络&#xff0c;也拿不走信息&#xff0c;改不了数据&#xff0c;看不懂信息。 事发后能审查追踪到破坏者&#xff0c;让破坏者跑不掉。 网络…

kafka安装并测试

一. Linux下ZooKeeper的安装及使用 1、创建工作目录&#xff0c;下载安装包 #创建安装目录 mkdir -p /opt/zookeeper #移动到目录 cd /opt/zookeepe #下载zookeeper安装包 wget https://mirrors.aliyun.com/apache/zookeeper/zookeeper-3.4.14/zookeeper-3.4.14.tar.gz #解…

Django 评论楼创建

Django 评论楼创建 【零】最终效果预览 【一】介绍 &#xff08;1&#xff09;情况说明 在Django模型层中有这么个字段 parent models.ForeignKey(toself, on_deletemodels.CASCADE, verbose_name"父评论ID", nullTrue, blankTrue)这个字段是一对多的外键字段 其…

07、JS实现:用回溯法实现数组全排列的算法(一步一步剖析,很详细)

回溯法实现数组全排列的算法 Ⅰ、回溯法实现数组全排列&#xff1a;1、题目描述&#xff1a;2、解题思路&#xff1a;3、实现代码&#xff1a; Ⅱ、小结&#xff1a; Ⅰ、回溯法实现数组全排列&#xff1a; 1、题目描述&#xff1a; 给定⼀个 没有重复 数字的序列&#xff0c;…

flowable-ui后台显式非中文

把flowable-ui的war包发布后&#xff0c;后台界面显示的是非中文 用的是6.7.2版本&#xff0c;经过了解该版本是有国际化配置文件的&#xff0c;支持中文 猜测可能是浏览器语言导致未显示中文&#xff0c;在控制台输入navigator.language&#xff0c;查看到果然是英文 解决方案…

如何制作蛋糕店小程序_开启您的蛋糕店小程序之旅

甜蜜滋味&#xff0c;一触即达——开启您的蛋糕店小程序之旅 在这个快节奏的时代&#xff0c;人们对美食的追求从未停歇。尤其是那些色香味俱佳、口感细腻的蛋糕&#xff0c;更是成为了许多人生活中的小确幸。然而&#xff0c;忙碌的工作和生活常常让我们无法亲自前往蛋糕店&a…

大型网络游戏设计与AI赋能-6

接上文&#xff01;&#xff01;! 所以最后我们会有一个Game design的分析。这个分析主要是在游戏类型&#xff0c;最后这个游戏会发布在什么平台上&#xff0c;游戏的玩法具体是什么样子的&#xff0c;需要提供给玩家哪些比较特殊的玩家体验等等。列出来这4项是一定要去考虑的…

经典机器学习模型(九)EM算法的推导

经典机器学习模型(九)EM算法的推导 1 相关数据基础 1.1 数学期望 1.1.1 数学期望的定义 根据定义&#xff0c;我们可以求得掷骰子对应的期望&#xff1a; E ( X ) X 1 ∗ p ( X 1 ) X 2 ∗ p ( X 2 ) . . . X 6 ∗ p ( X 6 ) 1 ∗ 1 6 2 ∗ 1 6 1 ∗ 1 6 3 ∗ 1 6 …

PostgreSQL11 | Windows系统安装PostgreSQL

本教程选取与参考书籍《PostgreSql11 从入门到精通》&#xff08;清华大学出版社&#xff09;的11大版本最新小版本11.22的安装作为教程案例 下载 下载PostgreSQL installer 下载到本地 安装 运行安装引导器 中国地区语言选项&#xff08;暂时&#xff09; Chinese(Simplifie…

Java static和继承

static特点 Java中的static关键字允许在没有创建类的实例的情况下进行调用。以下是static关键字的主要用途和特点&#xff1a; 静态变量&#xff08;类变量&#xff09;&#xff1a;使用static关键字声明的变量称为静态变量或类变量。这些变量属于类本身&#xff0c;而不是类…