点击屏幕生成爱心特效

Greasy Fork is available in English.
点击屏幕生成爱心特效

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

(function () {
    'use strict';

    // 添加爱心动画的样式
    GM_addStyle(`
      .heart {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #FF7F7F;
        transform: rotate(45deg);
        animation: heartbeat 1s ease-out forwards;
        z-index: 9999;
      }

      .heart::before,
      .heart::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #FF7F7F;
        border-radius: 50%;
      }

      .heart::before {
        top: -10px;
        left: 0px;
      }

      .heart::after {
        top: 0px;
        left: -10px;
      }

      @keyframes heartbeat {
        0% {
          transform: scale(0) rotate(45deg);
          opacity: 1;
        }
        50% {
          transform: scale(1.1) rotate(45deg);
          opacity: 0.8;
        }
        100% {
          transform: scale(1) rotate(45deg);
          opacity: 0;
        }
      }
    `);

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

        // 监听鼠标点击事件
        document.addEventListener('click', function (event) {
             // 如果点击的目标是爱心元素，则不处理
             if (event.target.classList.contains('heart')) {
                  return;
             }
            // 使用 pageX 和 pageY 获取页面坐标
            const x = event.pageX;
            const y = event.pageY;

            // 创建爱心元素
            const heart = document.createElement('div');
            heart.classList.add('heart');

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

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

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