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

最新推荐文章于 2024-09-22 21:00:09 发布

门前大桥下.

最新推荐文章于 2024-09-22 21:00:09 发布

阅读量419

点赞数 4

分类专栏： css基础文章标签： html css javascript

本文链接：https://blog.csdn.net/preserveXing/article/details/140774813

版权

css基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

源码

复制粘贴代码在同级别下放一张图片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-size
            return Math.ceil(Math.random()*w)
        }
        function getBodyHeightRand(size){
            //获取body的宽高
            let bodyObj=document.querySelector("body")
            let h=bodyObj.clientHeight-size
            return 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的img
                let 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-size
     return Math.ceil(Math.random()*w)
 }
 function getBodyHeightRand(size){
     //获取body的宽高
     let bodyObj=document.querySelector("body")
     let h=bodyObj.clientHeight-size
     return 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的img
        let 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)

效果

在这里插入图片描述

门前大桥下.

关注

4
点赞
踩
7

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录