利用 Css 实现 hover 动效

要实现 hover 变化、灯光模糊背景，并且有变化，您可以使用 CSS3 的伪元素、动画和过渡属性。以下是一个简单的例子，它将在一个 div 元素中创建一个灯光模糊的背景，并通过 hover 和动画实现灯光位置和背景的变化：

div {
  position: relative;
  height: 100vh;
  width: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #000000);
  transition: background 0.5s ease-in-out;
}

div:hover {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFDAB9);
}

div::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: 0 0 50px 50px rgba(255, 255, 255, 0.5);
  animation: light 5s infinite linear;
}

@keyframes light {
  0% {
    box-shadow: 0 0 50px 50px rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 200px 200px rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 50px 50px rgba(255, 255, 255, 0.5);
  }
}

div:hover::before {
  box-shadow: 0 0 200px 200px rgba(255, 255, 255, 0.2);
}

在这个例子中，我们使用 linear-gradient 函数来定义一个从顶部到底部的渐变，其中颜色从透明白色到黑色。我们使用 position 属性将 div 元素设置为相对定位，以便我们在其中添加伪元素。我们使用 ::before 伪元素来创建一个圆形元素，它通过 box-shadow 属性创建了灯光的效果。我们将 animation 属性设置为 light，它使用 keyframes 来定义动画序列，其中灯光效果在 5 秒钟内变化。

我们还使用 transition 属性将背景色的变化设置为 0.5 秒钟的过渡时间，以便在 hover 时实现渐变背景色的效果。在 div:hover 选择器中，我们将背景色更改为线性渐变从透明白色到桃色，从而实现背景色的变化。

在 div:hover::before 选择器中，我们将灯光效果的 box-shadow 属性更改为更强的模糊效果，以实现灯光效果的变化。