用CSS3实现鼠标移动到图片上图片变大效果

 时间:2024-11-05 16:05:10

1、先写好一个样子,图片随便一张:如图(图片,css,html)

用CSS3实现鼠标移动到图片上图片变大效果用CSS3实现鼠标移动到图片上图片变大效果用CSS3实现鼠标移动到图片上图片变大效果

2、这里图片加了边框,你可能不明白他的用途,这里说一下,加边框为了是让图片放大的时候,图像也是在方框里变大,而出现一个放大的效果,不至于把其他模块遮住,如图:

用CSS3实现鼠标移动到图片上图片变大效果

3、边框要注意的是:一定要加上。很多人没有注意,这也是自己做出来不好看的原因,这样放大更加自然,不会超出边框,如图:

用CSS3实现鼠标移动到图片上图片变大效果用CSS3实现鼠标移动到图片上图片变大效果用CSS3实现鼠标移动到图片上图片变大效果

4、实现他的变大和过渡效果,大家一定要记住:transform是控制变形的,transition是控制过渡的:如图:transition: all 0.6s;transform: scale(1.4); -webkit-transform: scale(1.4);

用CSS3实现鼠标移动到图片上图片变大效果

5、这是0.6 是调节时间的自己随便调,1.4是调节变形大小的放大多少倍。如图(放大倍数变的好大):

用CSS3实现鼠标移动到图片上图片变大效果
  • photoshop抠图技巧之“快速选择工具”的应用
  • PS教你如何抠出水花
  • 如何用ps消除雀斑
  • PS如何自定义画笔图案?
  • 如何用PS设计图形标志
  • 热门搜索
    白头发越来越多是什么原因 德玛西亚是什么意思 路不拾遗是什么意思 什么水不能喝 操是什么意思 原则是什么意思 单招是什么意思 外埠是什么意思 仁波切是什么意思 乏力是什么意思