html+css实现点击图⽚缩⼩或放⼤1、html代码
<div class="mainPro-img">
<img class="qqq" src="images/pro1.jpg" alt="" >
</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部分
css鼠标点击样式
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论