css3放大效果 - 奶酪-凌

参考案例：

http://www.harmay.com/

鼠标经过图片，图片放大。

1.html:

<body>
	<div>
		<a href="#"><img src="http://qq1234.org/uploads/allimg/140604/3_140604154539_2.jpg"></a>
	</div>
</body>

2.css:

div{ width: 200px; height: 200px; margin: 0 auto; border: 2px #64ecd2 solid;}
a{ display: inline-block;}
div img{ width: 200px; height: 200px;}

实现css3图片放大效果，需要用到transform和transition。

transform：旋转元素。transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

transition:过渡效果。transition: property（过渡效果的css3属性的名称） duration（完成过渡时间） timing-function（速度曲线） delay（何时开始）;

3.单纯的添加css3

div a:hover img{
		 transition:transform .5s ease-out;
                 -o-transition:transform .5s ease-out;
                -webkit-transition:transform .5s ease-out;
                -moz-transition:transform .5s ease-out;
                transform: scale(1.2);
                -ms-transform: scale(1.2);
                -webkit-transform: scale(1.2);
}

原图：

效果图：

发现，图片效果是有了，但是超出了我原有div的宽高。

所以，我在div中增加了 overflow:hidden; 属性。

效果图：

这样效果就达到了我需要的要求，具体大小细节可以修改

posted on 2016-03-18 16:15 奶酪-凌阅读(2658) 评论(0) 收藏举报

刷新页面返回顶部