console 命令行工具 X clear
console
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盯着看</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F2014_Website_appreciate%2F2014-09-16%2F20140916152230.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643522058&t=d53c2ad57c2c1ebcbc8dabab4637d932);
            background-size: 100% 100%;
        }

        .console {
            padding-left: 20px;
            padding-top: 20px;
        }

        .main {
            width: 5px;
            height: 5px;
            background: rgb(78, 150, 30);
            border-radius: 50%;

            position: fixed;
            top: 68%;
            left: 49.3%;
            transform: translate(-50%, -50%);
            transform-origin: center;

            animation-name: slice;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }

        .main img {
            width: 100%;
            height: 100%;
        }

        @keyframes slice {
            0% {
                width: 5px;
                height: 5px;
            }

            50% {
                width: 400px;
                height: 400px;
            }

            100% {
                width: 5px;
                height: 5px;
            }
        }
    </style>
</head>

<body>
    <div class="main">
    </div>
    <div class="console" style="color: #fff;">
        <p><span class="text-speed">速度(5秒):</span></p>
        <p><input type="range" min="0.1" max="10" step="0.1" value="5" id="range-speed" /></p>
        <p><span class="text-length">直径(400):</span></p>
        <p><input type="range" min="5" max="1000" value="400" id="range-length" /></p>
    </div>
    <script>
        window.onload = () => {
            let speed = document.querySelector('#range-speed'),
                sText = document.querySelector('.text-speed'),
                dom = document.querySelector('.main');
            speed.addEventListener('input', e => {
                dom.style.animationDuration = speed.value + 's';
                sText.innerText = `速度(${speed.value}秒):`;
            })

            let length = document.querySelector('#range-length');
            let lText = document.querySelector('.text-length');
            length.addEventListener('input', e => {
                let rule = findKeyframesRule('slice');
                rule.sheet.deleteRule(rule.index);
                lText.innerText = `直径(${length.value}):`;
                rule.sheet.insertRule(`
                @keyframes slice {
                    0% {
                        width: 5px;
                        height: 5px;
                    }

                    50% {
                        width: ${length.value}px;
                        height: ${length.value}px;
                    }

                    100% {
                        width: 5px;
                        height: 5px;
                    }
                }`);
            })

        }
        function findKeyframesRule(ruleName) {
            var styleSheets = document.styleSheets;
            for (var i = 0; i < styleSheets.length; ++i) {
                for (var j = 0; j < styleSheets[i].cssRules.length; ++j) {
                    if (styleSheets[i].cssRules[j].type === window.CSSRule.KEYFRAMES_RULE && styleSheets[i].cssRules[j].name === ruleName) {
                        return { sheet: styleSheets[i], index: j }
                    }
                }
            }
            return null
        }
    </script>
</body>

</html>