为点赞按钮添加提示动画

源码(大部分是D指导生成的emmm):

点赞提示动画
<section><img src="none", alt="点赞提示动画", onerror="
window.addEventListener('load', (e) => {
    const btn = document.querySelector('.btn.btn-likes.btn-secondary');
    if(!btn) return;
    const originalBtnStyle = {
        position: btn.style.position,
        overflow: btn.style.overflow
    };
    btn.style.position = 'relative';
    btn.style.overflow = 'visible';
    const arrowTip = document.createElement('div');
    arrowTip.innerHTML = '⇩ 点赞谢谢喵';
    arrowTip.style.position = 'absolute';
    arrowTip.style.bottom = '100%';
    arrowTip.style.left = '50%';
    arrowTip.style.transform = 'translateX(-50%)';
    arrowTip.style.marginBottom = '1px';
    arrowTip.style.color = '#ff69b4';
    arrowTip.style.fontSize = '12px';
    arrowTip.style.animation = 'bounceUp 1s infinite';
    arrowTip.style.whiteSpace = 'nowrap';
    btn.appendChild(arrowTip);
    const pulseElements = [];
    for(let i = 0; i < 2; i++) {
        const pulse = document.createElement('div');
        pulse.style.position = 'absolute';
        pulse.style.border = '2px solid rgba(255, 105, 180, 0.8)';
        pulse.style.borderRadius = '50%';
        pulse.style.width = '0';
        pulse.style.height = '0';
        pulse.style.left = '50%';
        pulse.style.top = '50%';
        pulse.style.transform = 'translate(-50%, -50%)';
        pulse.style.opacity = '0';
        pulse.style.pointerEvents = 'none';
        btn.appendChild(pulse);
        pulseElements.push(pulse);
        pulse.animate([
            { width: '0', height: '0', opacity: 0.8 },
            { width: '120%', height: '120%', opacity: 0 }
        ], {
            duration: 2000,
            delay: i * 1000,
            iterations: Infinity,
            easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
        });
    }
    const style = document.createElement('style');
    style.textContent = `
    @keyframes bounceUp {
        0%, 100% { transform: translateX(-50%) translateY(0); }
        50% { transform: translateX(-50%) translateY(-5px); }
    }`;
    document.head.appendChild(style);
    btn.addEventListener('click', function handleClick() {
        if (arrowTip.parentNode === btn) {
            btn.removeChild(arrowTip);
        }
        pulseElements.forEach(pulse => {
            if (pulse.parentNode === btn) {
                btn.removeChild(pulse);
            }
        });
        
        const btnRect = btn.getBoundingClientRect();
        const btnCenterX = btnRect.left + btnRect.width / 2;
        const btnCenterY = btnRect.top + btnRect.height / 2;
        const thankYou = document.createElement('div');
        thankYou.textContent = '(づ ̄3 ̄)づ❤️喜欢你';
        thankYou.style.position = 'fixed';
        thankYou.style.left = `${btnCenterX}px`;
        thankYou.style.top = `${btnCenterY}px`;
        thankYou.style.transform = 'translate(-50%, -50%)';
        thankYou.style.color = 'white';
        thankYou.style.fontWeight = 'bold';
        thankYou.style.fontSize = '14px';
        thankYou.style.pointerEvents = 'none';
        thankYou.style.zIndex = '999999';
        thankYou.style.textShadow = `
        0 0 5px #ff69b4, /* 整体 */
        1px 1px 1px #ffb4d9,    /* 右下 */
        -1px 1px 1px #ffb4d9,   /* 左下 */
        1px -1px 1px #ffb4d9,   /* 右上 */
        -1px -1px 1px #ffb4d9   /* 左上 */
      `;
        thankYou.style.whiteSpace = 'nowrap';
    
        document.body.appendChild(thankYou);
    
        thankYou.animate([
            { transform: 'translate(-50%, -50%) scale(0.8)', opacity: 0 },
            { transform: 'translate(-50%, -50%) scale(1.1)', opacity: 1, offset: 0.2 },
            { transform: 'translate(-50%, -50%) scale(0.95)', offset: 0.4 },
            { transform: 'translate(-50%, -50%) scale(1.05)', offset: 0.6 },
            { transform: 'translate(-50%, -50%) scale(0.98)', offset: 0.8 },
            { transform: 'translate(-50%, -50%) scale(1)', opacity: 1 }
        ], {
            duration: 1000,
            easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
        });
        setTimeout(() => {
            thankYou.animate([
                { transform: 'translate(-50%, -50%)', opacity: 1 },
                { transform: 'translate(-50%, -200%)', opacity: 0 }
            ], {
                duration: 1200,
                easing: 'ease-out'
            }).onfinish = () => {
                if (thankYou.parentNode === document.body) {
                    document.body.removeChild(thankYou);
                }
            };
        }, 1000);
        if (style.parentNode === document.head) {
            document.head.removeChild(style);
        }
        btn.removeEventListener('click', handleClick);
        btn.style.position = originalBtnStyle.position;
        btn.style.overflow = originalBtnStyle.overflow;
    }, { once: true });
});
if(this?.parentNode?.parentNode?.className !== undefined){
    if(this.parentNode.parentNode.className !== 'fr-element fr-view'){
        this.parentNode.removeChild(this);
    }
}
">
</img></section>

你的回應