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

最新推荐文章于 2024-07-30 15:40:41 发布

门前大桥下.

最新推荐文章于 2024-07-30 15:40:41 发布

阅读量642

点赞数 4

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

本文链接：https://blog.youkuaiyun.com/preserveXing/article/details/140774813

版权

源码

复制粘贴代码在同级别下放一张图片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