自定义大小的烟花燃放效果-html代码-BFW代码库

自定义大小的烟花燃放效果

代码语言：html

所属分类：粒子

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
@import url('https://fonts.googleapis.com/css?family=Allerta+Stencil');
        * {
            font-family: 'Allerta Stencil', sans-serif;
        }
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
            background: #111;
        }
        p {
            position: fixed;
            width: 100%;
            text-align: center;
            color: rgba(255,255,255,.15);
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            font-size: 60px;
        }
        button {
            background: #FF0000;
            border: 0px;
            border-radius: 4px;
            color: #fff;
            padding: 5px 15px;
            margin-bottom: 5px;
            cursor: pointer;
            transition: .3s all;
            outline: none;
            box-shadow: 0px 0px 5px #ff0000;
        }
        button:hover {
            background: #FF3030;
        }
        button:active {
            transform: translate(-2px, 2px);
        }
        .option {
            position: fixed;
            left: 40px;
            bottom: 40px;
        }
        label {
            fonzt-size: 14px;
            color: #fff;
        }
        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            height: 5px;
            margin-top: 20px;
            /*   background:#00C5CD; */
            background-image: linear-gradient(45deg ,#db0094, #0000ff, #ffff00, #ff0000, #db0094, #0000ff, #ffff00, #ff0000);
            outline: none;
            cursor: pointer;
            width: 200px;
            border-radius: 10px;
            border: 1px solid #fff;
            background-size: 400%;
            animation: animationBackground 20s infinite;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 20px;
            width: 20px;
            margin-top: -1px;
            border-radius: 50%;
            border: 3px solid #fff;
            box-shadow: 0px 0px 5px 2px #fff;
            background-image: linear-gradient(0deg ,#db0094, #0000ff, #ffff00, #ff0000, #db0094, #0000ff, #ffff00, #ff0000);
        }
        input[type="range"]::-webkit-slider-thumb:active {
            background: white;
        }
        input[type="range"]::slider-thumb {
            -webkit-appearance: none;
            height: 20px;
            width: 20px;
            margin-top: -1px;
            border-radius: 50%;
            border: 3px solid #fff;
            box-shadow: 0px 0px 5px 2px #fff;
            background-image: linear-gradient(0deg ,#db0094, #0000ff, #ffff00, #ff0000, #db0094, #0000ff, #ffff00, #ff0000);
        }

@keyframes animationBackground {
            0% {
                background-position: 0 0;
            }
            50% {
                background-position: 300% 0;
            }
            100% {
                background-position: 0 0;
            }
        }
    </style>

</head>
<body translate="no">
    <p>
        Happy New Year 2019!
    </p>
    <div class="option">
        <button id="Reset-Config">修改配置</button>
        <div class="">
            <input type="range" id="Size" value="3" step="0.1" min="1" max="8">
            <label for="">大小</label>
        </div>
        <div class="">
            <input type="range" id="Number" value="20" step="0.1" min="10" max="40">
            <label for="">质量</label>
        </div>
        <div class="">
            <input type="range" id="Fill" value="1" min="1" max="5">
            <label for="">填充</label>
        </div>
    </div>


    <script>
        document.addEventListener("DOMContentLoaded", function () {
           

            var canvas = document.createElement("canvas");
            var c = canvas.getContext("2d");

            document.body.appendChild(canvas);

            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            var Reset, Size, Number, Fill;

            Reset = document.querySelector("#Reset-Config");
            Size = document.querySelector("#Size");
            Number = document.querySelector("#Number");
            Fill = document.querySelector("#Fill");

            const config = {
                size: 3,
                number: 20,
                fill: .1
            };


            const Color.........完整代码请登录后点击上方下载按钮下载查看