css图片链接特效 |htmlcss3学习

a img {
transition: transform 0.3s ease;
transform-origin: center;
}
a:hover img {
transform: scale(1.2);
}
a:before {
content: "";
opacity: 0;
position: absolute;
background: rgba(0,0,0,0.5);
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: opacity 0.3s ease;
}
a:hover:before {
opacity: 1;
}

上述代码中，第一个特效是当鼠标悬停在图片上时对图片进行放大。使用 CSS3 的 transform 属性可以实现放大效果，同时使用 transition 属性指定过渡时间为 0.3s，并设置动画缓慢进出（ease）。因为图片是在链接中显示的，所以大家使用 a:hover img 来指定当鼠标悬停在链接上时对图片进行特效处理。

第二个特效是给链接图片添加遮罩层。使用:before 伪类来创建一个遮罩层，设置遮罩层的 opacity 属性为 0，让其透明不可见。当鼠标悬停在链接上时，把遮罩层的 opacity 属性设置为 1，这样就可以实现遮罩层的渐入渐出效果了。遮罩层的颜色可以根据需求自由调整。

除了上述特效之外，大家还可以通过其他属性实现更多不同的图片链接特效。例如，通过调整 border-radius 属性可以给图片添加圆角边框效果，通过添加 box-shadow 属性可以让图片显示出立体感等等。

以上就是关于 CSS 图片链接特效的一些介绍和示例代码。大家可以根据自己的需求和想象力，通过 CSS 来打造出更加丰富多彩的页面效果。