实现烟花效果

最新推荐文章于 2022-12-29 15:18:37 发布

thanksKlan

最新推荐文章于 2022-12-29 15:18:37 发布

阅读量442

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/hasakizzz66/article/details/108269734

版权

鼠标点击后，实现烟花效果

在这里插入图片描述
当鼠标点击后，会有一个小点慢慢上升，上升到鼠标点击的高度后，就会炸开

在这里插入图片描述
点击两个试试

html代码

<!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>
        *{
   
            margin: 0;
            padding: 0;
        }
        .box{
   
            width: 800px;
            height: 600px;
            background-color:#333;
            margin:100px auto;
            position:relative;
        }
        .fire{
   
            width: 20px;
            height: 20px;
            background-color:hotpink;
            position:absolute;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
    <script>
        // 点击事件 => box 
        // 创建 fire 
            // + 位置 left 和 光标一致
            // +  bottom 0
        // fire 运动  从 bottom 0 的位置 跑到 光标点击的位置
            // 移除
        // 随机创建火花
        // 设置每一个 火花的坐标 和 光标保持一致 
        // 炸开

    </script>
    <script src="./utiles.js"></script>
    <script src="./index.js"></script>
    <script>
        const box = document.querySelector('.box')
        new Fireworks(box)
    </script>
    
</body>
</html>

index.js

class Fireworks{
   
    constructor(ele){
   
        this.ele = ele || document.querySelector('.box')
        this.init()
    }
    init

最低0.47元/天解锁文章

thanksKlan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
实现烟花效果

鼠标点击后，实现烟花效果当鼠标点击后，会有一个小点慢慢上升，上升到鼠标点击的高度后，就会炸开点击两个试试html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫