css3放大效果

最新推荐文章于 2023-08-06 17:03:05 发布

a8852557

最新推荐文章于 2023-08-06 17:03:05 发布

阅读量293

点赞数

原文链接：http://www.cnblogs.com/Jinmj/p/5292553.html

版权

参考案例：

http://www.web-designers.cn/

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; 属性。

效果图：

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

转载于:https://www.cnblogs.com/Jinmj/p/5292553.html

a8852557

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3放大效果

参考案例：http://www.web-designers.cn/ http://www.harmay.com/鼠标经过图片，图片放大。1.html:<body> <div> <a href="#"><img src="http://qq1234.org/uploads/allimg/140604/3_14060...
复制链接

扫一扫