css鼠标悬停遮罩动画

鼠标悬停遮罩动画是指当鼠标悬停在某个元素上时，会出现一个遮罩层并且该元素会有相应的动画效果。一般情况下，鼠标悬停遮罩动画常用于图片展示、产品介绍等网站页面中。

实现鼠标悬停遮罩动画需要借助CSS的伪类选择器:hover和CSS3的过渡效果transition。通过:hover伪类选择器来控制鼠标悬停时的样式，同时使用transition来实现过渡效果。

具体实现步骤：
1. 首先，为需要添加鼠标悬停遮罩动画的元素设置position:relative;属性；
2. 然后，为该元素添加一个遮罩层，一般使用::before或::after伪元素来实现。同时设置该遮罩层的宽高、背景颜色、透明度等样式；
3. 最后，使用:hover伪类选择器来设置鼠标悬停时该元素及其遮罩层的样式，并使用transition来实现过渡效果。

下面是一段CSS代码示例：

.box {
    position: relative;
    width: 200px;
    height: 200px;
}

.box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

.box:hover::before {
    opacity: 1;
}