点击屏幕生成爱心特效

点击屏幕时显示爱心特效
目前为 2024-12-05 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name         点击屏幕生成爱心特效
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  点击屏幕时显示爱心特效
// @author       You
// @match        *://*/*
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // 添加爱心动画的样式
    GM_addStyle(`
        .heart {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            transform: rotate(45deg);
            animation: heartAnimation 1s ease-out forwards;
        }

        @keyframes heartAnimation {
            0% {
                transform: scale(0) rotate(45deg);
                opacity: 1;
            }
            100% {
                transform: scale(2) rotate(45deg);
                opacity: 0;
            }
        }
    `);

    // 确保页面完全加载
    window.addEventListener('load', function() {
        console.log('页面已加载');

        // 如果有动态内容，可以用 MutationObserver 监听 DOM 变化
        const observer = new MutationObserver(() => {
            console.log('DOM变化，监听新的内容');
        });

        observer.observe(document.body, { childList: true, subtree: true });

        // 监听鼠标点击事件
        document.addEventListener('click', function(event) {
            // 创建爱心元素
            const heart = document.createElement('div');
            heart.classList.add('heart');

            // 设置爱心的位置为点击位置
            heart.style.left = `${event.pageX-25 }px`;  // 调整位置使爱心的中心对准点击点
            heart.style.top = `${event.pageY-25 }px`;

            // 将爱心元素添加到页面中
            document.body.appendChild(heart);

            // 设置定时器，1秒后删除爱心元素
            setTimeout(() => {
                heart.remove();
            }, 1000);
        });
    });

})();