鼠标点击出现心形的代码

<script>
   (function(window, document, undefined) {
      var hearts = [];
         window.requestAnimationFrame = (function() {
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
            function(callback) {
               setTimeout(callback, 1000 / 60)
            }
         })();
         init();
         function init() {
      css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform:rotate(45deg);}.heart:after,.heart:before{content: '';width:inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius:50%;position:absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
            attachEvent();
            gameloop()
         }
         function gameloop() {
            for (var i = 0; i < hearts.length; i++) {
               if (hearts[i].alpha <= 0) {
                  document.body.removeChild(hearts[i].el);
                  hearts.splice(i, 1);
                  continue
               }
               hearts[i].y--;
               hearts[i].scale += 0.004;
      hearts[i].alpha -= 0.013;
               hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color
            }
            requestAnimationFrame(gameloop)
         }
         function attachEvent() {
            var old = typeof window.οnclick === "function" && window.onclick;
            window.onclick = function(event) {
               old && old();
               createHeart(event)
            }
         }
         function createHeart(event) {
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push({
               el: d,
               x: event.clientX - 5,
               y: event.clientY - 5,
               scale: 1,
               alpha: 1,
               color: randomColor()
               });
            document.body.appendChild(d)          }
         function css(css) {
            var style = document.createElement("style");
            style.type = "text/css";
            try {
               style.appendChild(document.createTextNode(css))
            } catch(ex) {
               style.styleSheet.cssText = css
            }
            document.getElementsByTagName('head')[0].appendChild(style)
         }
      function randomColor() {
         return "rgb(" + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + ")"
      }
   })(window, document);
</script>


将上面的代码复制到网页中即可


另一个用“deepseek”生成的鼠标点击出现心形的代码

   <style>
      body {
         margin: 0;
         height: 100vh;
         cursor: pointer;
         overflow: hidden;
      }
      .heart {
         position: absolute;
         pointer-events: none;
         font-size: 20px;
         color: #ff3366;
         animation: float 3s ease-out forwards;
      }
      @keyframes float {
         0% {
            transform: translate(0, 0) scale(1);
            opacity: 1;
         }
         100% {
            transform: translate(20px, -100px) scale(2.5);
            opacity: 0;
         }
      }
   </style>

   <script>
      document.addEventListener('click', function(e) {

   // 创建爱心元素

      const heart = document.createElement('div');
         heart.className = 'heart';
         heart.innerHTML = '❤';

   // 设置爱心位置为点击位置

      heart.style.left = e.clientX + 'px';
         heart.style.top = e.clientY + 'px';

   // 添加随机偏移和旋转效果

      const randomOffset = Math.random() * 20 - 10;
         heart.style.transform = `translate(${randomOffset}px, 10) rotate(${Math.random() * 30 - 15}deg)`;

   // 随机大小

      const randomSize = 5 + Math.random() * 15;
         heart.style.fontSize = randomSize + 'px';

   // 随机颜色(可选)

      const colors = ['#CC0066', '#ff5050', '#009900', '#ff3366', '#ffdf5a', '#0000FF', '#FFFF66', '#CC33FF', '#ff3366', '#ff66a3', '#ff9999', '#ff1493','#ff5a5a', '#ff9d5a', '#5aff6e', '#5a9dff', '#c05aff'];
         heart.style.color = colors[Math.floor(Math.random() * colors.length)];

   // 添加到页面

      document.body.appendChild(heart);

   // 动画结束后移除元素

      setTimeout(() => {
            heart.remove();
         }, 2000);
      });
   </script>


将上面的代码复制到网页中即可

2025促销:香港特价空间,最低仅需20元,可永久使用!
本站空间由 三维免费空间 友情提供