[分享]css3图片点击放大

CSS3可以实现图片点击放大的效果，具体步骤如下：

/* CSS代码 */
img {
    max-width: 100%;
    height: auto;
    transition: all 0.3s ease-in-out;
}
img:hover {
    transform: scale(1.2);
} 

首先，我们需要将图片的最大宽度设置为100%以保证图片在不同大小的设备上都可以自适应。然后，我们使用CSS3提供的transform属性来实现图片的放大效果。transition属性可以让过渡变得平滑，hover伪类可以实现在鼠标移入图片时的效果。

以上代码适用于所有的图片，如果只想针对某个特定的图片实现放大效果，可以通过给图片添加class属性来实现：

/* CSS代码 */
.enlarge-img {
    max-width: 100%;
    height: auto;
    transition: all 0.3s ease-in-out;
}
.enlarge-img:hover {
    transform: scale(1.2);
} 

在HTML中，我们可以给图片添加class属性，并将class值设置为enlarge-img：

<!-- HTML代码 -->
<img src="example.jpg" class="enlarge-img" alt="example image"> 

这样就可以单独为这个图片实现放大效果了。