如何用CSS实现鼠标跟随动画效果？

12 min read

可以使用CSS的transform和transition属性来实现鼠标跟随动画效果，具体步骤如下：

  1. 在HTML文档中添加一个 div 标签，并指定该标签的 id 属性。
<div id="follow"></div>
  1. 使用CSS对该标签进行样式定义。
#follow {
  position: fixed;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: red;
  transition: all 0.3s ease-out;
}

其中，position: fixed属性可以让该标签固定在屏幕上，width和height属性可以指定标签的大小，border-radius属性可以使边框圆角化，background-color属性可以设置标签的背景颜色，transition属性可以指定动画效果的过渡时间和过渡类型。

  1. 使用JavaScript监听鼠标移动事件，获取鼠标相对于窗口的位置，并将位置赋给标签。
var follow = document.getElementById("follow");
document.addEventListener("mousemove", function(event) {
  var x = event.clientX;
  var y = event.clientY;
  follow.style.left = x + "px";
  follow.style.top = y + "px";
});

其中，clientX和clientY属性可以获取鼠标相对于视口的水平和垂直位置，style.left和style.top属性可以设置标签的水平和垂直位置。

  1. 使用CSS的transform属性对标签进行缩放操作，增强动画效果。
#follow {
  ...
  transform: scale(0.5);
}
#follow:hover {
  transform: scale(1);
}

其中，transform: scale(0.5)属性可以将标签缩小为原来的一半，transform: scale(1)属性可以将标签恢复为原大小，#follow:hover伪类可以在鼠标悬停时增强动画效果。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>鼠标跟随动画效果</title>
	<style type="text/css">
	#follow {
		position: fixed;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: red;
		transform: scale(0.5);
		transition: all 0.3s ease-out;
	}
	#follow:hover {
		transform: scale(1);
	}
	</style>
</head>
<body>
	<div id="follow"></div>
	<script type="text/javascript">
	var follow = document.getElementById("follow");
	document.addEventListener("mousemove", function(event) {
		var x = event.clientX;
		var y = event.clientY;
		follow.style.left = x + "px";
		follow.style.top = y + "px";
	});
	</script>
</body>
</html>