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>
转载于:https://blog.csdn.net/weixin_43358075/article/details/90105644?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-7&spm=1001.2101.3001.4242