#鼠标跟随小羊，来一场狼羊追逐赛#title# 一个有趣的互动效果，让你的鼠标变成一个小羊，后面跟着一只狼，无论你把鼠标移到哪里，狼都会紧追不舍。实现这个效果并不难，只要几个简单的步骤： 1. 准备素材你需要一张小羊的图片和一张狼的图片，最好是PNG格式的，这样可以保持图片的透明度。 2. 创建HTML文件创建一个新的HTML文件，并在其中添加以下代码： ```html <!DOCTYPE html> <html> <head> 鼠标跟随小羊

前端

2023-07-31 04:54:13

鼠标跟随小羊，来一场狼羊追逐赛

准备好体验一场紧张刺激的狼羊追逐了吗？只需几个简单的步骤，你就可以让你的鼠标变成一只小羊，身后紧追一只饥肠辘辘的狼！

准备素材

首先，我们需要一些素材：

一张小羊的 PNG 图片
一张狼的 PNG 图片

创建 HTML 文件

接下来，创建一个新的 HTML 文件，输入以下代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #fff;
      cursor: none;
    }

    #sheep {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-image: url("sheep.png");
    }

    #wolf {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-image: url("wolf.png");
    }
  </style>
</head>
<body>
  <div id="sheep"></div>
  <div id="wolf"></div>

  <script>
    var sheep = document.getElementById("sheep");
    var wolf = document.getElementById("wolf");

    document.addEventListener("mousemove", function(e) {
      sheep.style.top = e.clientY - 50 + "px";
      sheep.style.left = e.clientX - 50 + "px";

      wolf.style.top = e.clientY - 50 + "px";
      wolf.style.left = e.clientX - 50 + "px";
    });
  </script>
</body>
</html>