在别的鼠标网站看到了类似这样的鼠标点击效果，不懂代码编写的我通过求助AI帮我实现CSS代码注入

基于全局实现，而Halo的设置-代码注入 路径下，有全局Head标签 的代码注入位置。虽然不是学代码，也不太懂前端，于是尝试着和AI沟通我的需求。

1.鼠标在web的页面全局任意页面任意位置点击时，随机出现emoji和♥

2.emoji往随机方向位移并淡出，1秒后消失，♥在出现后垂直往上方向位移并淡出，1秒后消失

3.需要肉眼可见的位移动画过程，且过程流畅。

大概是这3个提示句概括了我的效果实现需求。中途也跟AI拉扯了几轮，代码AI也调试了几次最后才达到我满意的效果。

下面附上代码：

路径：设置-代码注入-全局Head标签 ，将下列代码注入后，保存，刷新页面即可，如果未及时更新，可尝试CTRL+F5强制刷新

<!-- 以下是鼠标点击出现emoji和♥ -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Emoji on Click</title>
  <style>
    #emoji-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9999;
    }
    .emoji, .heart {
      position: absolute;
      font-size: 30px;
      animation: fade-out 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
    .heart {
      animation-name: heart-fade-out;
    }
    @keyframes fade-out {
      0% { opacity: 1; transform: translate(0, 0); }
      100% { opacity: 0; transform: translate(var(--random-x), var(--random-y)); }
    }
    @keyframes heart-fade-out {
      0% { opacity: 1; transform: translate(0, 0); }
      100% { opacity: 0; transform: translate(0, -100px); }
    }
  </style>
</head>
<body>
  <div id="emoji-container"></div>
  <script>
    window.addEventListener('load', function () {
      const emojis = ['😀', '😎', '🤩', '🥳', '🎶','🐶','🐽','🐻','🎈','🌭','🍗','🙄','😍'];
      const container = document.getElementById('emoji-container');
      document.addEventListener('click', function (e) {
        // 创建并添加小心心
        let heart = document.createElement('span');
        heart.textContent = '💕';
        heart.className = 'heart';
        heart.style.left = `${e.clientX}px`;
        heart.style.top = `${e.clientY - 30}px`;
        container.appendChild(heart);

        // 创建并添加随机表情
        let emoji = document.createElement('span');
        emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
        emoji.className = 'emoji';
        emoji.style.left = `${e.clientX}px`;
        emoji.style.top = `${e.clientY}px`;
        emoji.style.setProperty('--random-x', `${(Math.random() * 300 - 150)}px`);
        emoji.style.setProperty('--random-y', `${(Math.random() * 300 - 150)}px`);
        container.appendChild(emoji);
      });
    });
  </script>
</body>
</html>

还有更多好玩的美化玩法，欢迎交流~