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

 时间:2026-02-12 02:34:56

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设计图形标志
  • 热门搜索
    近义词的四字成语 矗立的近义词 着急的近义词 分辨的近义词是什么 数落的近义词 女生短发发型大全 儿童发型男 宝宝感冒鼻塞怎么办 淘宝怎么交保证金 临危不惧的近义词