实现烟花效果纯js

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

日薪2000的打工人

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

阅读量103

点赞数

分类专栏： js有趣的效果文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_51346098/article/details/120725988

版权

本文介绍了如何利用JavaScript，HTML和CSS创建一个交互式的烟花效果。通过点击黑色背景，可以触发随机生成的小烟花动画，为网页增添趣味性。

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

html和css代码

 <style>
        #container {
            width: 80%;
            height: 600px;
            border: 1px red solid;
            position: relative;
            margin: 20px auto;
            cursor: pointer;
            background: black;
        }

        .fire {
            background: red;
            position: absolute;
            /* 设置bottom时,top获取为最大值,减去鼠标点击位置 */
            bottom: 0px;
            width: 6px;
            height: 6px;

        }

        .small-fire {
            width: 10px;
            height: 10px;
            position: absolute;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div id="container"></div>

js代码

  //获取节点
        var conObj = document.getElementById('container');
        //绑定点击事件
        conObj.onclick = function (event) {

最低0.47元/天解锁文章

日薪2000的打工人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录