css3鼠标滑动显示图层

CSS3提供了非常强大的动画和过渡效果。其中，鼠标滑动显示图层是一种非常实用的效果。通过鼠标的滑动，可以让隐藏的图层展现出来，并且给用户带来更好的体验。

要实现鼠标滑动显示图层的效果，我们需要使用CSS3中的:hover伪类和过渡效果。下面就是一个示例代码：

.container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  color: #fff;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.container:hover .layer {
  opacity: 1;
}

在这段代码中，我们首先给父元素.container设置了overflow:hidden，这样可以将子元素.layer隐藏起来。接着，我们给子元素.layer设置了opacity:0和transition属性，这样就能实现过渡效果。最后，通过使用:hover伪类选择器，当用户鼠标滑动到.container时，子元素.layer就会显示出来。

鼠标滑动显示图层效果不仅可以用于展示隐藏的内容，还可以用于悬停提示等场景。通过CSS3的过渡效果，我们可以轻松实现非常好的动画效果，给用户带来更好的体验。