html鼠标跟随特效代码

以下是一段简单的HTML和CSS代码，可以实现鼠标跟随特效：

HTML代码：

<div class="box">
  <h1>鼠标跟随特效</h1>
</div>

CSS代码：

.box {
  position: relative;
  display: inline-block;
}
.box h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box:hover h1 {
  color: red;
}
.box:hover:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
  transform: translate(-50%, -50%);
  z-index: -1;
}

这段代码的实现原理是，在鼠标移动到盒子上方时，使用:hover伪类来改变标题的颜色，并在盒子内部创建一个伪元素:before，模拟一个红色圆点跟随鼠标移动。