找回密码
 立即注册
即日起,论坛关闭新用户注册和登录,论坛相关的贴子保留查阅和下载。获得授权后,有技术问题可联系微信 13199509559 一对一解决。 2024-3-12
查看: 3939|回复: 2

CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效...

205

主题

205

主题

205

主题

管理员

Rank: 9Rank: 9Rank: 9

积分
0
admin 发表于 2018-4-19 19:50:49 | 显示全部楼层 |阅读模式

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

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

效果如下图所示:

1、当未鼠标未放到图片上的效果:


2、当鼠标放到图片上后(放大的过程是有动画过渡的,这个过渡的时间可以自定义):


代码如下:

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title></title>  
  6.         <style type="text/css">  
  7.             div{  
  8.                 width: 300px;  
  9.                 height: 300px;  
  10.                 border: #000 solid 1px;  
  11.                 margin: 50px auto;  
  12.                 overflow: hidden;  
  13.             }  
  14.             div img{  
  15.                 cursor: pointer;  
  16.                 transition: all 0.6s;  
  17.             }  
  18.             div img:hover{  
  19.                 transform: scale(1.4);  
  20.             }  
  21.         </style>  
  22.     </head>  
  23.     <body>  
  24.         <div>  
  25.             <img src="img/focus.png" />  
  26.         </div>  
  27.     </body>  
  28. </html>  
复制代码


其中:

transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。

transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。


0

主题

0

主题

0

主题

高级会员

Rank: 4

积分
621
蓝色屠龙刀 发表于 2018-5-11 11:39:23 | 显示全部楼层
应该加分呀












广西百香果批发 百香果批发 网狼百香果批发 网狼百香果 广西网狼百香果

0

主题

0

主题

0

主题

高级会员

Rank: 4

积分
621
蓝色屠龙刀 发表于 2018-5-16 11:20:01 | 显示全部楼层
此帖必火!












百香果苗 百香果苗价格 百香果种苗 百香果种苗价格 百香果果苗
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表