html+css实现点击图片缩小或放大
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.
·
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部分
更多推荐
已为社区贡献2条内容
所有评论(0)