失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > html+css实现点击图片缩小或放大

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

时间:2023-08-24 21:23:21

相关推荐

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.8)代表图片变为原图片的0.8倍,0.2s代表该变化在0.2s内完成

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

4、完结

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

更新:

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

如果觉得《html+css实现点击图片缩小或放大》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。