CSS遮罩层动画是网页中常用的一种交互效果，它可以将一个元素遮盖住并添加动画效果，让用户产生一种交互感。下面我们来看一下CSS遮罩层动画的制作步骤。

//HTML结构<p ><img src="image.jpg"><p ></p></p>//CSS样式.mask{position:relative;width:300px;height:200px;}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);opacity:0;transition:opacity 0.5s;}.mask:hover .overlay{opacity:1;}

首先，我们在HTML中添加一个p作为遮罩层的容器，并在其中添加需要遮盖的元素。在容器的内部添加一个p作为遮罩层，并设置其样式。在CSS样式中，通过设置.overlay的position为absolute，将其定位到容器的左上角，然后将其宽度和高度都设置为100%，铺满整个容器。同时，设置其背景色为半透明的黑色，并将其初始的opacity设置为0，即遮罩层默认不可见。

在容器的hover状态下，我们将.overlay的opacity属性改为1，让遮罩层渐变出现。同时，设置transition属性为0.5s，让遮罩层出现时有一个过渡效果。