首页 > Web堆儿 > 正文

HTML5+CSS3实现图片的放大/缩小

时间:2017-06-29 15:02:09  转载请注明出处:盛世阳光网站建设 本文地址:http://www.gonet.com.cn/webduirshow-124.html

最近做项目时,经常遇到需要图片缓慢放大的效果。我做的时候想到了几种方法,所以来总结一下。

1、 利用css改变图片的宽高,做出视觉上的放大。
首先,将图片写入html页面中,给定宽高。


箭头所指向的就是我们需要变化的图片。我们需要给定图片父级盒子的宽高,如上图。

Tips:
transition用于设置四个过渡属性。
这四个属性分别为:




这个属性要设置在做动画的元素上。就是“谁”做动画,“谁”就需要设置过渡属性。

设置图片的宽高分别为100%,是为了让图片与父级盒子一样大。这样当盒子变大时,图片不会出现偏移的现象。

以上准备工作完成后,我们就需要设置鼠标移动后图片父级盒子改变到的宽高。



这样就可以实现鼠标划过图片变大的效果了。
当然,同样也可以直接作用于图片上,方法还是一样的。

2、 利用jQuery中的css()方法,改变图片的大小。
同样将图片盒子给定宽高。




样式与方法一相同。
然后我们利用css()方法来改变他的大小。



这样就可以利用css()方法来改变他的宽高,从而做到图片的放大效果。

3、 利用jQuery中的animate()自定义动画的方法,改变图片的大小,实现放大的效果。
要利用这种方式,html与css跟之前是一样的。


 
由于animate方法是自定义动画方法,因此不需要过渡属性来进行缓动。

此时,页面上的图片便会自动放大。


4、 利用scale()方法,实现图片放大的效果。
scale() 方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。图片的变化是以中心为基准点来变化的。
这个方法同样是通过样式进行改变的。
结构和样式不需要进行调整。
只需要给图片盒子加一个transform: scale(1.2);即可 。数值表示放大/缩小的为原始的几倍。(此时的过渡效果最好还是添加上,可以使图片变化时感觉更加圆滑流畅)



5、 利用css3的keyframe来创建动画

Keyframe的定义和用法如下:




首先html结构还是一样,css则需要进行改变。我们需要设定的是动画后的值。
比如:



接下来我们要设定动画中css样式。我将动画分成了5个阶段。每个阶段改变他宽高的1/5,连贯下来就会出现动画的效果。



之所以写多个,是因为浏览器并不完全之前keyframe,因此需要使用每个浏览器所支持的不同的写法。

这是w3c上标明的对于浏览器的支持程度。


创建完动画之后我们就可以直接引用了。只要使用animation就可以搞定了。



第一个值表示动画的名称,也就是我们所定义的动画名称。第二个值是完成动画的时间。
给定完毕后,便能够出现图片放大的动画效果了。


  盛世阳光秉承着专业、贴心的服务理念,用心、用智、用情对待每一位新老客户。无论是在网站、app还是游戏领域,你都能看到我们的身影,旨为为企业互联网+新模式带来更多灵感与机遇。开创行业发展趋势,引领行业创新潮流,为企业改造升级出谋划策,我们的努力会让你明白“适合的,才是最好的”。互联网的盛世,岂能没有阳光同行?




   盛世阳光手机版网站    盛世阳光微信公众平台

北京:北京市朝阳区金蝉西路甲一号酷车小镇D1-1栋  010-51296822

上海:上海市洛川中路1158号B2幢609  021-64201096

京ICP备05015483号

版权所有 2001-2016 北京市盛世阳光文化传播有限责任公司