CSS中的伪类可以更方便的帮助我们定义过渡效果，这里，我们详细介绍一下利用:hover实现遮罩层效果。:hover是指当鼠标悬停在元素上时所发生的效果。
实现遮罩层的步骤
需要两个相等大小的元素。
两个元素的位置应该相同。
遮罩层元素应该为黑色背景，白色字体。
鼠标在未悬浮到元素之上时，遮罩层应该透明。
鼠标在悬浮到元素之上时，应该减少遮罩层的透明度。
为遮罩层加上过渡时间。
效果展示
色彩因为录制gif时出现了偏差，但能说明原理。
代码实现
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.bottom {height: 100px;width: 100px;background-color: greenyellow;}.top {height: 100px;width: 100px;background-color: black;color: white;margin-top: -100px;opacity: 0;}.top:hover {opacity: 0.5;transition: opacity 2s;}</style></head><body> <div class="bottom"></div><div class="top"><center>遮罩层</center></div></body></html>
