html+css实现点击图片缩小或放大

debugtoday

已于 2022-02-09 14:26:22 修改

阅读量2w

点赞数 12

分类专栏： html+css设置图片hover放大缩小效果文章标签： css html elementui

于 2022-01-07 11:39:08 首次发布

本文链接：https://blog.csdn.net/debugtoday/article/details/122360974

版权

1 篇文章 4 订阅

订阅专栏

1、html代码

 <div class="mainPro-img">
     <img class="qqq" src="images/pro1.jpg" alt="" style="width: 100%;">
 </div>

2、给需要放大或缩小的图片添加联动样式

.qqq{
    transition: all 0.2s linear;
}

3、设置图片的hover样式，scale(0.8)代表图片变为原图片的0.8倍，0.2s代表该变化在0.2s内完成

.qqq:hover{
    transform: scale(0.8);
    transition: all 0.2s linear;
}

4、完结

----------------------------------------------

更新：

实现边框在鼠标移上去与鼠标离开时的动态缩放效果，使用after联系鼠标上移与鼠标退出，详情见下图中css部分

关注