js模拟烟花特效

最新推荐文章于 2024-07-04 18:38:53 发布

50x

最新推荐文章于 2024-07-04 18:38:53 发布

阅读量1.1k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46443891/article/details/104590871

版权

本文介绍了如何使用JavaScript在网页上创建鼠标点击触发的烟花爆炸特效。通过获取鼠标点击位置，生成烟花并设置其CSS属性使其从下往上移动，到达指定位置后破碎成不同颜色、速度和方向的碎片。同时，当烟花碎片超出屏幕时会自动移除。

摘要由CSDN通过智能技术生成

1.概述

在网页背景中实现鼠标点击出现模拟烟花爆炸的特效

2.思路

1.获取鼠标点击位置，底端创建烟花节点。
2.为烟花添加css属性，烟花节点从下至上运动。
3.运动至鼠标位置时移除烟花节点，同时生成多个烟花碎片。
4.为不同的烟花碎片随机生成不同的颜色、运动速度、运动方向。
5.烟花碎片超出屏幕显示部分时移除。

3.代码部分

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
   
            padding: 0;
            margin: 0;
        }
 
        html,
        body {
   
            width: 100%;
            height: 100%;
            background-color: black;
            overflow: hidden;
        }
    </style>
</head>
 
<body>
    <script src="move.js"></script>
    <script>
 
        class Firework {
   
            constructor(x, y) {
   //x,y鼠标的位置
                this.x = x;//将水平位置赋值给this.x属性。
                this.y = y;//将垂直位置赋值给this.y属性。
                this.ch = document.documentElement.clientHeight;//可视区的高度
            }
            init() {
   
                //1.创建烟花节点。
                this.firebox = document.createElement('div');
                this.firebox.style.cssText = `width:5px;height:5px;background:#fff;position:absolute;left:${
     this.x}px;top:${