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

css3出来了好多让你兴奋的属性，很多效果直接可以不用js就可以写出来了，这可欢喜了我们这些不大懂js的同学了。特此讲解一下这个图片放大的效果。发现好多站都使用的了这个效果挺好的。不仔细研究一下真是好多问题，特此整理。

操作方法

  • 01

    先写好一个样子，图片随便一张：如图（图片，css,html）

  • 02

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

  • 03

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

  • 04

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

  • 05

    这是0.6 是调节时间的自己随便调，1.4是调节变形大小的放大多少倍。如图（放大倍数变的好大）：

赞 (0)

相关推荐

  • 电脑上怎么设置PS图片上添加方框纹理效果

    电脑上怎么设置PS图片上添加方框纹理效果

    随着社会和经济的发展,电脑PS软件已经成为我们生活中必不可少的一部分,许多人喜欢将自己的照片在经过PS处理后分享给自己的好友们,那么我们在电脑上怎么设置PS图片上添加方框纹理效果呢,接下来就让小编来教 ...

  • 电脑端美图秀秀如何在图片上添加带荧光效果的文字内容

    电脑端美图秀秀如何在图片上添加带荧光效果的文字内容

    美图秀秀是我们现在经常使用的图片编辑软件.今天徐跟大家分享的是电脑端美图秀秀如何在图片上添加带荧光效果的文字内容. 具体如下:1.首先我们打开电脑中的美图秀秀,进入主界面之后点击中间的打开图片选项.2 ...

  • 鼠标如何实现自动上下翻页的效果

    就拿一篇小说的网页来说，你先打开网页，然后在页面上按住鼠标中间滚轮键，现在大家的鼠标都是有中间滚轮键吧。那没有鼠标滚轮键的鼠标在市场上都已经绝版了。按下滚轮键之后，就会出现一个图标按钮。如下图所示： ...

  • appstore显示变大了怎么回事?(图片,分辨率等变大)

    问题具体化: iphone上的app store的分辨率突然变大了,所有显示都变大了,好像变成了ipad上的appstore的感觉 原因及解决方法: 这是开启了缩放导致的,关闭即可. 操作步骤如下: ...

  • EXCEL表格使用鼠标滚轮浏览时会变大变小怎么办?

    有时我们在使用EXCEL文件办公时,不小心滑动了鼠标滚轮文档就会变大或变小,严重影响到了我们办公,这该怎么解决呢? 1.首先点击左上角文件按钮. 2.再打开最下面一个选项按钮. 3.此处选择高级选项. ...

  • 把鼠标放图片上，怎样才能显示出字？

    常常会看到把鼠标放在图片上,就会显示出文字.通常我们都认为是写上Alt标签,图片上就可以显示字了.其实不然,这都是我们对Alt属性的误读.下面,来给大家说下,图片上要显示字究竟是用什么标签呢?通过下面 ...

  • 有道词典如何进行图片取词?有道词典怎么翻译图片上的文字?

    我们在阅读图片上文字的时候，看到图片上的英文想知道它的意思，由于文字太长不想输入查询。下面小编就为大家分享一个有道词典怎么翻译图片上的文字的方法，教大家怎么偷懒 1、打开“有道词典”，右击桌面右下角的 ...

  • Mac怎么在预览图片上添加亲手写的签名

    如果在你自己创作的电子作品上签上自己的大名,是不是感觉很酷呢?而且是亲笔签名哦!Mac就提供了预览功能,可以在预览图片或在PDF上加上自己亲手写的签名,比起电子字体当然亲笔签名更好了.你也想试试吗?赶 ...

  • PPT幻灯片中怎么插入图片并在图片上输入文字?

    在幻灯片中有时候根据需要要改变幻灯片的背景颜色,就需要插入图片,并且在图片上输入文字,那么如何在幻灯片中插入图片并在图片上输入文字呢? 1.打开幻灯片,单击"插入",单击" ...