文章目录

  • ​​应用到所有网站​​


js 点击红心特效_mapreduce

js 点击红心特效_mongodb_02

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        .container {
            height: 100vh;
            width: 100vw;
            background-color: #fffae5;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .heartWrap {
            position: absolute;
        }

        .heart {
            position: absolute;
            background-color: #faa;
            animation: heartMove 1s linear infinite;
            animation-iteration-count: 1;
            animation-delay: var(--delay, 0);
            animation-fill-mode: forwards;
            transform-origin: center;
            opacity: 0;
            /* transition: all 1s linear; */
        }

        .heart:before,
        .heart:after {
            position: absolute;
            content: "";
            left: 6px;
            top: 0;
            width: 6px;
            height: 10px;
            background: inherit;
            border-radius: 15px 15px 0 0;
            transform-origin: 0 100%;
            transform: rotate(-45deg);
        }

        .heart:after {
            left: 0;
            transform-origin: 100% 100%;
            transform: rotate(45deg);
        }

        .late0 {
            --lateX: -0px;
            --delay: 0.2s;
        }

        .late1 {
            --lateX: -10px;
            --delay: 0.1s;
        }

        .late2 {
            --lateX: -20px;
        }

        .late3 {
            --lateX: 10px;
            --delay: 0.3s;
        }

        .late4 {
            --lateX: 20px;
            --delay: 0.4s;
        }

        @keyframes heartMove {
            0% {
                transform: scale(0.5);
                opacity: 0.1;
            }

            50% {
                transform: scale(1) translate(var(--lateX, 0px), -100px);
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="heart"></div>

    </div>
    <script>
        document.addEventListener('click', (e) => {
            const vNode = document.createElement('div');
            vNode.className = "heartWrap";
            Array.from(new Array(5), (_, index) => {
                const heart = document.createElement('div');
                heart.className = `heart late${index}`;
                heart.style.background = "#" + Math.random().toString(16).slice(-6);
                // heart.style.top = -index * 2 + 'px';
                vNode.appendChild(heart);
            });
            document.body.appendChild(vNode);
            vNode.style.top = e.pageY - 20 + "px";
            vNode.style.left = e.pageX - 10 + "px";
            setTimeout(() => {
                document.body.removeChild(vNode);
            }, 2000)
        })
    </script>
</body>

</html>

应用到所有网站

我将这段代码放在猴油脚本中 想在所有网页中都有此点击特效可以前往下载
猴油脚本下载 ​​​https://www.chrome666.com/chrome-extension/tampermonkey.html​​

​​红心跳跃插件下载https://greasyfork.org/zh-TW/scripts/436095-%E7%BA%A2%E5%BF%83%E8%B7%B3%E8%B7%83​​

js 点击红心特效_数据库_03