css图片特效6 |css3背景颜色变化

.box {
position: relative;
display: inline-block;
}
.box img {
display: block;
}
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(45deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.box:hover::before {
opacity: 1;
}

首先，大家要创建一个容器来包含图片，并将其设为相对定位，以便在后续样式中设置绝对定位元素。然后为包含图片的 img 元素设置 block 属性，以使其完全填充容器。

接下来，大家将创建一个伪元素 ::before 作为光影效果的背景。使用线性渐变来创建从不透明到透明的背景，这将创建一个从左上角到右下角的渐变色。opacity 属性设置为 0，使其默认为不可见状态。大家将在鼠标滑过容器时将其激活。

最后，大家将为容器添加鼠标悬停事件处理程序，这样当鼠标滑过容器时，大家就可以设置伪元素的 opacity 属性为 1，从而使其变得可见，呈现出光影效果。大家还为伪元素添加了过渡效果以使其动画更加平滑。