红心跳跃

鼠标点击特效

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください。
// ==UserScript==
// @name         红心跳跃
// @namespace    http://hongbin.xyz/
// @version      0.2
// @description  鼠标点击特效
// @author       hongbin
// @match        *://*/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const style = document.createElement("style");
document.head.appendChild(style);
style.innerHTML = `
.heartWrap {
    position: absolute;
    z-index:999;
}

.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;
    }

    150% {
        transform: translate(var(--lateX, 0px), -30px);
    }

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

    100% {
        opacity: 0;
    }
}
`;

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)
})

})();