css3鼠标移入元素渐变

CSS3是一个强大的标准，它提供了丰富的样式和动画效果，这为设计师提供了更多的创意空间。其中，鼠标移入元素渐变是一种非常常用的动画效果。

/* CSS代码 */
.Box {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  transition: background-color 0.5s ease;
}

.Box:hover {
  background-color: #3498db;
}

在上面的代码中，首先我们选择了一个容器元素，并设置了它的宽度、高度和背景颜色。接着，我们使用CSS3的过渡效果属性（transition）来实现鼠标移入时的平滑过渡。

在过渡属性中，我们设置了背景颜色参数，它表示了我们要过渡的属性。接着，我们设置了一个过渡时间（0.5s），这样在状态发生改变时，浏览器就会以0.5秒的时间来实现过渡效果。最后，我们设置了过渡的速度（ease），这是一种过渡效果，可以让我们的效果更加平滑。

接下来，我们使用:hover伪类来实现元素鼠标移入的渐变效果。当我们把鼠标移到元素上时，它的背景颜色会由原来的颜色渐变为#3498db，因为我们在:hover状态下修改了背景颜色属性。

总之，CSS3的过渡效果和:hover伪类配合使用，可以非常容易地实现元素鼠标移入的渐变效果。这样，我们可以为我们的web应用程序添加更多的动画效果，使它们更加生动有趣。