css实现背景随鼠标跟随

CSS实现背景随鼠标跟随是一个很有趣的效果，可以让网站变得更加生动有趣。下面我们通过代码来实现这个效果。

html,body {
  height: 100%;
  overflow: hidden;
}

.container {
  background-image: url('your-image.jpg');
  background-position: center;
  background-size: cover;
  height: 100%;
}

.container:hover {
  animation: move-bg 10s infinite linear;
}

@keyframes move-bg {
  0% {
    background-position: top left;
  }
  50% {
    background-position: center;
  }
  100% {
    background-position: bottom right;
  }
}

上面的代码非常简单，首先我们给html和body元素设置高度为100%并且隐藏溢出内容。然后我们创建一个名为.container的容器，并且设置背景图片和背景位置。当鼠标悬停在容器上时，我们用动画让背景图片按照我们设定的规则进行移动，这里的move-bg就是我们定义的动画名称。关键帧中我们可以设置背景图片的位置，让它根据我们的需求在不同的时间出现在不同的位置上。

这就是CSS实现背景随鼠标跟随的整个过程，通过简单的代码就能实现一个很酷的效果，不需要引入其他的JavaScript或jQuery插件。网站设计师们可以将这个效果运用到网站上，让网站变得更加有趣和富有活力。