css3鼠标滑过遮罩效果

CSS3鼠标滑过遮罩效果

CSS3可以很轻松地创建鼠标滑过遮罩效果，让页面更加生动有趣。下面我们就来看看使用CSS3创建鼠标滑过遮罩效果的步骤和实现方法。

    .wrapper {
        position: relative;
        width: 300px;
        height: 200px;
    }

    .image {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        transition: opacity 0.5s ease;
    }

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background-color: #000;
        opacity: 0.5;
        transition: opacity 0.5s ease;
    }

    .wrapper:hover .mask {
        opacity: 0;
    }

    .wrapper:hover .image {
        opacity: 0.5;
    }

以上代码中，我们首先创建一个包含图片和遮罩的wrapper容器。图片设置为绝对定位，并且与遮罩层重叠。遮罩层使用背景色作为遮罩，初始时设置opacity为0.5。然后我们用:hover选择器来控制鼠标滑过时遮罩和图片的透明度。当鼠标滑过时，遮罩层变为透明，图片的透明度降低，显示出遮罩层下的原图。

通过使用CSS3鼠标滑过遮罩效果，我们可以轻松地实现页面的互动和动态效果，让用户体验更加出色。