HTML+CSS+JavaScript实现烟花绽放的效果源码

源码

复制粘贴代码 在同级别下放一张图片fire.png接可以了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>烟花特效</title><style>*{margin: 0;padding: 0;}body{position: relative;width: 100vw;height: 100vh;overflow: hidden;background-color: #000;}.aniAvtive{animation: bloom 2s ease-in-out infinite;}@keyframes bloom {0%{transform: scale(0);filter: hue-rotate(0deg);}80%,100%{transform: scale(1.5);filter: hue-rotate(180deg);}}</style>
</head>
<body><button class="but">暂停自动绽放</button><button class="start">开启自动绽放</button><script>//返回随机值的函数function getBodyWidthRand(size){//获取body的宽高let bodyObj=document.querySelector("body")let w=bodyObj.clientWidth-sizereturn Math.ceil(Math.random()*w)}function getBodyHeightRand(size){//获取body的宽高let bodyObj=document.querySelector("body")let h=bodyObj.clientHeight-sizereturn Math.ceil(Math.random()*h)}function getImgSizeArea(max,min){return Math.ceil(Math.random()*(max-min)+min)}//生成绽放的烟花function makeFireFlower(){//性能优化 节点利用if (document.body.children.length>=10) {//获取第一个我node的imglet list=Array.from(document.body.children)for (let i = 0; i < list.length; i++) {if (list[i].style.display==="none") {list[i].style.display="block"//设置图片的位置list[i].style.position="absolute"//随机值let size =getImgSizeArea(600,200)list[i].style.top=getBodyHeightRand(size)+"px"list[i].style.left=getBodyWidthRand(size)+"px"list[i].style.width=size+"px"list[i].style.height=size+"px"setTimeout(()=>{list[i].style.display='none'},2000)return}}}else{// 通过js来实现烟花的绽放//创建一个IMG 元素 在添加到app中去let imgobj= document.createElement("img")//设置图片的地址imgobj.src="./fire.png"imgobj.onload=function(e){//设置图片的位置this.style.position="absolute"//随机值let size =getImgSizeArea(600,200)this.style.top=getBodyHeightRand(size)+"px"this.style.left=getBodyWidthRand(size)+"px"this.style.width=size+"px"this.style.height=size+"px"//添加绽放的动画this.classList.add("aniAvtive")console.log(this.style.top,this.style.left);setTimeout(()=>{this.style.display='none'},2000)document.body.appendChild(this)}}}//自动生成绽放的烟花let timer = setInterval(()=>{makeFireFlower()},500)//获取let butobj=document.querySelector(".but")butobj.onclick=function(){clearInterval(timer)}let startobj=document.querySelector(".start")startobj.onclick=function(){timer = setInterval(()=>{makeFireFlower()},500)}//手动绽放document.body.onclick=function(e){makeFireFlower()}//优化性能 定时清楚无用的img//此方式 需要调用定时器 ,不停的创建和删除元素 有性能浪费//优化成了 节点利用// let timer1 = setInterval(()=>{//     if (document.body.children.length>=7) {//         document.body.removeChild(document.body.children[0])//     }// },500)</script>
</body>
</html>

功能拆分

获取随机值 在视口可见区域

//返回随机值的函数
function getBodyWidthRand(size){//获取body的宽高let bodyObj=document.querySelector("body")let w=bodyObj.clientWidth-sizereturn Math.ceil(Math.random()*w)}function getBodyHeightRand(size){//获取body的宽高let bodyObj=document.querySelector("body")let h=bodyObj.clientHeight-sizereturn Math.ceil(Math.random()*h)}

返回随机的图片大小范围

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

生成img 插入body中

 function makeFireFlower(){//性能优化 节点利用if (document.body.children.length>=10) {//获取第一个我node的imglet list=Array.from(document.body.children)for (let i = 0; i < list.length; i++) {if (list[i].style.display==="none") {list[i].style.display="block"//设置图片的位置list[i].style.position="absolute"//随机值let size =getImgSizeArea(600,200)list[i].style.top=getBodyHeightRand(size)+"px"list[i].style.left=getBodyWidthRand(size)+"px"list[i].style.width=size+"px"list[i].style.height=size+"px"setTimeout(()=>{list[i].style.display='none'},2000)return}}}else{// 通过js来实现烟花的绽放//创建一个IMG 元素 在添加到app中去let imgobj= document.createElement("img")//设置图片的地址imgobj.src="./fire.png"imgobj.onload=function(e){//设置图片的位置this.style.position="absolute"//随机值let size =getImgSizeArea(600,200)this.style.top=getBodyHeightRand(size)+"px"this.style.left=getBodyWidthRand(size)+"px"this.style.width=size+"px"this.style.height=size+"px"//添加绽放的动画this.classList.add("aniAvtive")console.log(this.style.top,this.style.left);setTimeout(()=>{this.style.display='none'},2000)document.body.appendChild(this)}}
}

自动执行make烟花的函数

 //自动生成绽放的烟花let timer = setInterval(()=>{makeFireFlower()},500)

效果

在这里插入图片描述

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

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

相关文章

2024年7月23日~2024年7月29日周报

目录 一、前言 二、完成情况 2.1 一种具有边缘增强特点的医学图像分割网络 2.2 融合边缘增强注意力机制和 U-Net 网络的医学图像分割 2.3 遇到的困难 三、下周计划 一、前言 上周参加了一些师兄师姐的论文讨论会议&#xff0c;并完成了初稿。 本周继续修改论文&#xff0…

【Qt】QLCDNumberQProgressBarQCalendarWidget

目录 QLCDNumber 倒计时小程序 相关属性 QProgressBar 进度条小程序 相关设置 QLCDNumber QLCDNumber是Qt框架中用于显示数字或计数值的小部件。通常用于显示整数值&#xff0c;例如时钟、计时器、计数器等 常用属性 属性说明intValueQLCDNumber显示的初始值(int类型)va…

Hbase简介和快速入门

一 Hbase简介 1 HBase定义 Apache HBase™ 是以hdfs为数据存储的&#xff0c;一种分布式、可扩展的NoSQL数据库。 2 HBase数据模型 HBase的设计理念依据Google的BigTable论文&#xff0c;论文中对于数据模型的首句介绍。Bigtable 是一个稀疏的、分布式的、持久的多维排序map…

【JAVA学习笔记】找不到依赖项 ‘org.springframework.boot:spring-boot-starter-web:3.0.5‘

如果环境都是跟着教程配的话&#xff0c;并且上网搜了一圈询问gpt都没发现对应长得像的错误&#xff0c;那么试试刷新一下Maven项目&#xff0c;可能问题就自己解决了。如果这样解决不了再查到底是什么地方没有配置对。 &#xff08;我第一次遇到这个问题的时候搜了半天都不知…

【ROS 最简单教程 002/300】ROS 集成开发环境安装 (虚拟机版): Noetic

&#x1f497; 有遇到安装问题可以留言呀 ~ 当时踩了挺多坑&#xff0c;能帮忙解决的我会尽力 &#xff01; 1. 安装操作系统环境 Linux ❄️ VM / VirtualBox Ubuntu20.04 &#x1f449; 保姆级图文安装教程指路&#xff0c;有经验的话 可以用如下资源自行安装 ITEMREFERENCE…

【Windows】Mountain Duck(FTP服务器管理工具)软件介绍

软件介绍 Mountain Duck是一款基于Cyberduck开发的应用程序&#xff0c;它允许用户通过FTP、SFTP、WebDAV、S3和OpenStack Swift等协议连接到云存储和远程服务器&#xff0c;并在本地文件浏览器中以熟悉的方式访问和管理这些文件。 功能特点 支持多种协议: Mountain Duck支持…

Unity和WebGL交互-2024/7/30

进入项目 1 新建一个.jslib的文件 2 放到项目内Plugins文件夹下 3 可以用vscode之类的编译器打开这个文件 编写内容 mergeInto(LibraryManager.library, {// 方法名必须和c#中的相同// 有参数 需要用UTF8ToString&#xff08;&#xff09;OnInitSDK:function(str) {window.OnIn…

vue自写组件可输入,可下拉选择,因为el-autocomplete数据多了会卡

<!-- 引入组件 --><AutoCompletev-model"scope.row.strreceivername":lngemployeeid"scope.row.lngreceiverid"select"handleSelect($event,scope.row)"/> methods:{handleSelect(item, row) {row.lngreceiverid item.lngemployeei…

项目实战——外挂开发(30小时精通C++和外挂实战)

项目实战——外挂开发&#xff08;30小时精通C和外挂实战&#xff09; 外挂开发1-监控游戏外挂开发2-秒杀僵尸外挂开发3-阳光地址分析外挂开发4-模拟阳光外挂开发5-无限阳光 外挂开发1-监控游戏 外挂的本质 有两种方式 1&#xff0c;修改内存中的数据 2&#xff0c;更改内存中…

从零开始学习网络安全渗透测试之基础入门篇——(二)Web架构前后端分离站Docker容器站OSS存储负载均衡CDN加速反向代理WAF防护

Web架构 Web架构是指构建和管理Web应用程序的方法和模式。随着技术的发展&#xff0c;Web架构也在不断演进。当前&#xff0c;最常用的Web架构包括以下几种&#xff1a; 单页面应用&#xff08;SPA&#xff09;&#xff1a; 特点&#xff1a;所有用户界面逻辑和数据处理都包含…

火山引擎VeDI数据技术分享:两个步骤,为Parquet降本提效

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 作者&#xff1a;王恩策、徐庆 火山引擎 LAS 团队 火山引擎数智平台 VeDI 是火山引擎推出的新一代企业数据智能平台&#xff0c;基于字节跳动数据平台多年的“数据…

[Javascript】前端面试基础3【每日学习并更新10】

Web开发中会话跟踪的方法有那些 cookiesessionurl重写隐藏inputip地址 JS基本数据类型 String&#xff1a;用于表示文本数据。Number&#xff1a;用于表示数值&#xff0c;包括整数和浮点数。BigInt&#xff1a;用于表示任意精度的整数。Boolean&#xff1a;用于表示逻辑值…

认证授权概述和SpringSecurity安全框架快速入门

1. 认证授权的概述 1.1 什么是认证 进入移动互联网时代&#xff0c;大家每天都在刷手机&#xff0c;常用的软件有微信、支付宝、头条、抖音等 以微信为例说明认证的相关基本概念。在初次使用微信前需要注册成为微信用户&#xff0c;然后输入账号和密码即可登录微信&#xff0c…

git 推送时出现错误 Locking support detected on remote “origin“

背景&#xff1a;代码托管是局域网搭建的gitlab 按照提示配置 lfs.locksverify true 还是没有用。 网上搜索了一番&#xff0c;其中有人提到可能时服务器磁盘满了&#xff0c;连到服务器上 df -h 查看&#xff0c; 发现根目录已经写满了&#xff1a; 使用命令行&#xff1a; d…

scipy.fft.fft函数与scipy.fft.rfft函数的异同

import numpy as np from scipy import signal import matplotlib.pyplot as plt思路&#xff1a;1&#xff09;先利用fft计算得出其幅频值2&#xff09;在利用rfft计算得出其幅频值&#xff0c;看1&#xff09;和2&#xff09;那个能还原出信号的原始幅值# 生成一个示例信号 n…

c#实际开发长到的知识

基础科普: 个人建议先把rotion的库导入进来再操作,具体需要导入的库有,helper库包含了modbus通讯封装好的模块,而mvvm则可以用来做设计mvvm模块,你可以使用里面封装好的实现方法,用起来特别简单更容易实现其中的操作,但是我担心那天被卡脖子了啊啊啊,要是我罗工把库下…

【CTFHub】文件上传漏洞详解!

Webshell&#xff1a; 又称一句话木马。WebShell就是以网页文件形式存在的一种代码执行环境&#xff0c;主要用于网站管理、服务器管理、权限管理等操作。 WebShell根据不同的语言分为:ASP木马、PHP木马、JSP木马(上传解析类型取决于网站服务端编写语言类)&#xff0c;该类木马…

(二)延时任务篇——通过redis的key监听,实现延迟任务实战

前言 本节内容是关于使用redis的过期key&#xff0c;通过开启其监听失效策略&#xff0c;模拟订单延迟任务的执行流程。其核心原理是通过使用redis订阅与发布的方式&#xff0c;将过期失效的key通过广播的方式&#xff0c;发布给客户端&#xff0c;客户端可以监听此消息进而消…

LNMP动态网站环境部署

1、LINUX部署 stop firewallddisable selinux 2、Nginx部署 ​ vim /etc/yum.repos.d/nginx.repo [nginx-stable] namenginx stable repo baseurlhttp://nginx.org/packages/centos/$releasever/$basearch/ gpgcheck1 enabled1 gpgkeyhttps://nginx.org/keys/nginx_signing.…

【前端 · 面试 】JavaScript 之你不一定会的基础题(一)

最近我在做前端面试题总结系列&#xff0c;感兴趣的朋友可以添加关注&#xff0c;欢迎指正、交流。 争取每个知识点能够多总结一些&#xff0c;至少要做到在面试时&#xff0c;针对每个知识点都可以侃起来&#xff0c;不至于哑火。 JavaScript 之你不一定会的基础题 前言 面试往…