CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
2017-12-14 10:01
1086 查看
CSS3的transform:scale()可以实现按比例放大或者缩小功能。
CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
效果如下图所示:
1、当未鼠标未放到图片上的效果:
2、当鼠标放到图片上后(放大的过程是有动画过渡的,这个过渡的时间可以自定义):
代码如下:
其中:
transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。
transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。
CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
效果如下图所示:
1、当未鼠标未放到图片上的效果:
2、当鼠标放到图片上后(放大的过程是有动画过渡的,这个过渡的时间可以自定义):
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; border: #000 solid 1px; margin: 50px auto; overflow: hidden; } div img{ cursor: pointer; transition: all 0.6s; } div img:hover{ transform: scale(1.4); } </style> </head> <body> <div> <img src="img/focus.png" /> </div> </body> </html>
其中:
transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。
transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。
相关文章推荐
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- Android的AnimationSet动画实现图片的轮播,移动和切换可以自定义时间
- JS与CSS3实现图片响应鼠标移动放大效果示例
- 纯css3实现鼠标经过图片显示描述的动画效果
- css实现鼠标移动图片居中放大效果
- CSS3实现图片鼠标悬浮放大效果
- css3实现小米商城鼠标移动图片上浮阴影效果
- 属性动画图片从上移动到屏幕中间,放大图片的二倍再缩小到原来,自定义圆实现倒计时,解析数据显示,点击条目实现js交互
- css3实现 鼠标移上图片 放大遮罩效果
- 属性动画图片从上移动到屏幕中间,放大图片的二倍再缩小到原来,自定义圆实现倒计时,解析数据显示,点击条目实现js交互
- jq 移动效果可以自定义实现图片切换等效果
- 仿淘宝商品图片放大镜效果(鼠标移动上去会出现放大的图片,并且可以移动)
- css3和js实现鼠标滑过图片微移动 平滑过渡
- css3实现鼠标移入图片放大效果
- JS实现鼠标移动到缩略图显示大图的图片放大效果
- jQuery鼠标移动图片上实现放大效果
- jq实现鼠标移动到 图片上放大,移开图片缩小效果(打算封装成插件)
- CSS3 动画实现放大缩小、涟漪扩散效果、叠加图片循环来回显示
- css实现鼠标移动图片上放大效果