点击屏幕生成爱心特效

点击屏幕时显示爱心特效
目前为 2024-12-06 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         点击屏幕生成爱心特效
// @namespace    http://tampermonkey.net/
// @version      2.9
// @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; /* 矩形颜色 */
        transform: rotate(45deg); /* 旋转形成心形的主体部分 */
        animation: heartbeat 1s ease-out forwards;
      }

      .heart::before,
      .heart::after {
        content: "";
        position: absolute;
        width: 50px;   /* 圆形宽度 */
        height: 50px;  /* 圆形高度 */
        background-color: red; /* 圆形颜色 */
        border-radius: 50%; /* 形成圆形 */
      }
       .heart::before {
        top: -25px;  /* 圆形顶部对齐 */
        left: 0;     /* 左侧圆形 */
      }

      .heart::after {
        top: 25px;      /* 圆形顶部对齐 */
        left: -25px;  /* 右侧圆形 */
      }
     

      @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) {
            // 获取页面滚动的距离
            const scrollX = window.scrollX || window.pageXOffset;
            const scrollY = window.scrollY || window.pageYOffset;

            // 获取页面相对于视口的坐标
            const rect = document.body.getBoundingClientRect();

            // 计算点击位置相对于页面的坐标
            const x = event.clientX + scrollX - rect.left;
            const y = event.clientY + scrollY - rect.top;

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

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

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

            // 设置定时器，0.8秒后删除爱心元素
            setTimeout(() => {
                heart.remove();
            }, 800);
        });
    });
})();
欢迎访问Greasy Fork镜像
