微语:代码适合中午敲,早晚出BUG
蒙层+动画【进阶版】 前端
效果图
给li hover效果,让蒙层初始值宽度为0,当鼠标移入到li时,蒙层宽度增加,在添加一个动画效果即可实现。
代码如下
CSS
li {
width: 200px;
height: 300px;
position: relative;
background-color: saddlebrown;
}
img {
width: 200px;
height: 100%;
}
.Mask {
width: 0;
/* 初始值 */
height: 300px;
background-color: rgb(0 0 0 / 65%);
position: absolute;
top: 0;
left: 0;
}
li:hover .Mask {
transition: all 1s;
/* 动画 */
width: 200px;
/* 目标值 */
}
HTML
<ul>
<li>
<img src="images/31.jpg" alt="">
<div class="Mask">
</div>
</li>
</ul>
CSS添加蒙层效果 前端
给元素添加蒙层效果
原图
效果图
思路:
蒙层盒子在父元素下,给父元素设置相对定位,给蒙层(子元素)设置绝对定位,让蒙层和父元素重合,给蒙层设置透明度即可。
代码如下:
css
img {
width: 200px;
height: 300px;
}
li {
position: relative;
}
.Mask {
width: 200px;
height: 300px;
background-color: rgb(0 0 0 / 65%);
position: absolute;
top: 0;
left: 0;
}
HTML
<ul>
<li>
<img src="images/31.jpg" alt="">
<div class="Mask">
</div>
</li>
</ul>