css3 鼠标滑过左移

CSS3鼠标滑过左移是一种非常常见的网页动效，它可以让页面更加生动有趣。下面我们来看一下如何使用CSS3实现鼠标滑过左移效果。

/* 鼠标滑过左移效果 */
.Box {
  width: 200px; /* 设置容器宽度 */
  height: 200px; /* 设置容器高度 */
  background-color: #eee; /* 设置容器背景色 */
  transition: all 0.3s ease-out; /* 设置过渡效果，使动画更加平滑 */
}

.Box:hover {
  transform: translateX(-10px); /* 设置滑动距离和方向，-10px表示向左移动10个像素 */
}

上面的代码中，我们首先定义了一个容器，宽高为200px，并设置了容器的背景色。然后使用CSS3的过渡效果，使动画更加平滑。接着，使用:hover伪类，表示当鼠标滑过该容器时，执行后面的transform属性，设置滑动距离和方向。

在实际的应用中，我们可以将鼠标滑过左移效果应用到各种元素上，比如图片、按钮、导航栏等等。只需要根据具体需求调整属性值即可。