css3遮罩动画 |css图片由下而上淡入

.mask {
position: relative;
overflow: hidden;
}
.mask img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
.mask::before {
content: "";
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s;
}
.mask:hover::before {
opacity: 1;
}

上面的代码可以创建一个带遮罩动画的图像。代码中，大家首先给容器元素添加了position：relative和overflow：hidden属性，然后大家为要使用的图片添加了position：absolute属性以便可以在容器中进行移动。接着大家为容器添加了伪元素before，作为遮罩层，并设置了背景颜色和透明度。最后，大家使用:hover 选择器来实现在鼠标悬停时显示遮罩层的效果。

总之，遮罩动画是一种非常有趣和实用的CSS3特效，它可以让你的网页看起来更具吸引力和活力。通过使用上述代码片段，你可以轻松地添加漂亮的遮罩动画效果。希望你喜欢这个教程！