css 单纯的点击图片放大

CSS可以实现一些很有趣的效果，比如点击图片放大的效果。这个效果可以用CSS3里面的transform和transition属性来实现。

img:hover{
        transform:scale(1.2);
    /*鼠标放上图片的大小*/    transition: all .2s ease-in-out;
/*放大缩小过度时间*/}

以上代码意思是当鼠标在图片上悬停的时候，图片放大1.2倍，过度时间为.2秒。这样就完成了图片点击放大的效果。

同时，我们也可以添加一个点击图片放大的效果。我们可以用checkbox来实现这个效果。

input[type="checkbox"] {
        display:none;
}
input[type="checkbox"]:checked ~ .showImage{
        transform:scale(2);
    /*点击后的大小*/    z-index:1001;
 /*遮住其他内容*/}
.showImage{
        transition: transform .5s ease-in-out;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        max-width: 85%;
        max-height: 85%;
        opacity: 0;
        z-index: 1000;
}
.showImage img{
        width: 100%;
        height: 100%;
        object-fit: contain;
}
    

以上代码意思是，当点击checkbox的时候，同时在CSS中使用伪类:~，选择图片所在的div容器showImage，让其放大至2倍（transform:scale(2); ），再使用z-index属性遮住其他的内容，达到只显示大图的效果。同时在showImage中还设置了图片最大宽度和高度、位置、透明度等。点击图片后可以再点击checkbox取消图片放大效果。

CSS中的transform和transition属性可以实现很多有趣的效果，这里只是简单的介绍了其中的一个。希望大家可以通过更多的实践方法，探索出更多有趣的CSS效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！