2021年春节点击屏幕放烟花

点击屏幕放烟花


<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fireworktitle>
    <style>
        * {
      
            padding: 0;
            margin: 0;
        }

        html,
        body {
      
            background-color: #000;
            height: 100%;
            width: 100%;
            font-size: 10pt;
            overflow: hidden;
        }

        span {
      
            display: inline-block;
            text-align: center;
            position: fixed;
            transform: translate(0, 0);
            transition-property: transform, color, font-size;
            transition-duration: 1s;
            color: #888;
        }

        h1 {
      
            color: #444;
            text-align: center;
            line-height: 100vh;
        }
    style>
head>

<body onclick="clc()">
    <h1>点击屏幕放烟花h1>
body>

html>
<script>
    function clc(event) {
      
        var e = event || window.event;
        var x = (e.pageX || e.clientX);
        var y = (e.pageY || e.clientY);
        var r = Math.random() * 255;
        var g = Math.random() * 128 + 127;
        var b = 765 - r - g;
        var color = [r, g, b];
        color.sort((a, b) => {
      
            return Math.random() < .5 ? -1 : 1;
        })
        for (var i = 0; i < 100; i++) {
      
            fire(x, y, color[0], color[1], color[2])
        }
    }
    function fire(x, y, r, g, b) {
      
        var add = document.createElement('span')
        add.innerHTML = '*'
        add.style.left = x + 'px';
        add.style.top = y + 'px';
        document.body.appendChild(add);
        setTimeout(() => {
      
            var ran = Math.random() * 2 - 1;
            var ran1 = (Math.random() * 2 - 1) * Math.sqrt(1 - Math.pow(ran, 2));
            var str = 'translate(' + ((ran) * 20) + 'vmin,' + ((ran1) * 20 + 5) + 'vmin)';
            add.style.transform = str;
            add.style.color = 'rgb(' + r + ',' + g + ',' + b + ')';
            add.style.fontSize = 'larger';
        }, 1);
        setTimeout(() => {
      
            add.parentNode.removeChild(add);
        }, Math.random() * 400 + 700);
    }
script>

你可能感兴趣的:(前端,js,javascript)