由于hover伪类添加的动画效果,仅当
鼠标
放在元素上时会被触发,而当
鼠标
离开
时,效果会中断,会显得很生硬。
大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦,
CSS
3
便可以帮你解决这些问题。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF
-
8">
<meta name="viewport" content="width=device
-
width, initial
-
scale=1.0">
CSS
3
实现
鼠标
移动到
图片
上
图片
变大(
缓慢
变大,有过渡效果,
放大
的过程是有动画过渡的,这个过渡的时间可以自定义)
CSS
3
的transform:scale()可以实现按比例
放大
或者缩小功能。
CSS
3
的transition允许
CSS
的属性值在一定的时间区间内平滑地过渡。这种效果可以在
鼠标
单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变
CSS
的属性值。
参考文档:
http://blog.csdn.net/u014175572/article/details/515
3
5768
.newli_img:hover img{
-
webkit
-
transform:scale(1.2);/*在Safari 和 Chrome兼容下
还原
*/
-
moz
-
transform:scale(1.2);/*在Fire...
浏览器打开