700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > php鼠标移过图片放大代码 鼠标移上去 图片会自动原地放大CSS写法

php鼠标移过图片放大代码 鼠标移上去 图片会自动原地放大CSS写法

时间:2020-11-30 17:16:03

相关推荐

php鼠标移过图片放大代码 鼠标移上去 图片会自动原地放大CSS写法

今天在制作一个zblog模板的时候,用上了这个图片放大特效,想到以前也没写过,就分享出来吧!

在我第一次接触这个特效的时候,以为会很复杂,至少会有几行代码才能去实现,但学习后真的精到了!

CSS3的transform:scale()可以实现按比例放大或者缩小功能。

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

那么,什么是鼠标移上去,图片就原地放大的效果呢?

左边这个就是原图了,右边这个是放大后的效果图,尺寸被限制后,只在原地放大,只是图片原地放大而已!

鼠标移上去图片放大特效代码:html>

div{

width:300px;

height:300px;

border:#000solid1px;

margin:50pxauto;

overflow:hidden;

}

divimg{

cursor:pointer;

transition:all0.6s;

}

divimg:hover{

transform:scale(1.4);

}

可以看出,先用div限制的尺寸,并用overflow: hidden;仿制超出范围!

然后设置transition的变化时间,为0.6秒,可以自行设置大小,等于变化的速度!

而transform: scale(1.4);意思是放大1.4倍了,也是可以调整设置的!

其实就这么简单,一个触发图片放大效果就做出来了!

PS:忘了说,transition和transform最好去兼容下其它浏览器!

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