CSS3鼠标滑过遮罩效果
CSS3可以很轻松地创建鼠标滑过遮罩效果,让页面更加生动有趣。下面我们就来看看使用CSS3创建鼠标滑过遮罩效果的步骤和实现方法。
.wrapper { position: relative; width: 300px; height: 200px; } .image { position: absolute; top: 0; left: 0; z-index: 1; transition: opacity 0.5s ease; } .mask { position: absolute; top: 0; left: 0; z-index: 2; background-color: #000; opacity: 0.5; transition: opacity 0.5s ease; } .wrapper:hover .mask { opacity: 0; } .wrapper:hover .image { opacity: 0.5; }
以上代码中,我们首先创建一个包含图片和遮罩的wrapper容器。图片设置为绝对定位,并且与遮罩层重叠。遮罩层使用背景色作为遮罩,初始时设置opacity为0.5。然后我们用:hover选择器来控制鼠标滑过时遮罩和图片的透明度。当鼠标滑过时,遮罩层变为透明,图片的透明度降低,显示出遮罩层下的原图。