css特效6 |css 灰度滤镜

.image {
position: relative;
width:200px;
height:200px;
}
.image:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 0 25px rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
}
.image:hover:before {
box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.3);
}
.image:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
background-image: url("your-image-url");
background-size: cover;
background-position: center;
transition: all 0.3s ease;
}
.image:hover:after {
transform: scale(1.2);
}

这段CSS代码的作用是为指定的HTML元素添加一个包含缩放的图像的效果。当鼠标放在指定的HTML元素上时，图像将会变大，并且白色边框会变窄。

具体来说，代码中使用了伪元素:before和:after，分别为HTML元素添加几何形状和样式。使用伪元素的优点是可以将这些元素添加到现有的HTML代码中，而不影响其结构。此外，使用CSS过渡效果来创建平滑的动画效果。

在实际使用中，您可以将此特效应用于产品图片、鼠标悬停动画等任何需要增强可视效果的HTML元素上。尝试在自己的网页中使用此CSS特效6，让您的网站更加动感和生动。