欢迎来到“phpshuo.com”!
PHPSHUO > 前端 >CSS > CSS实现鼠标触摸时图片放大功能

CSS实现鼠标触摸时图片放大功能

2014-04-26  Views:  分类:CSS«  »
本文将用纯CSS来实现鼠标触摸时,图片变大功能,当鼠标移开时,图片恢复原形!
要实现该功能很多工程师都是用JS来实现,太麻烦了,而且很多JS实现方式遇到了浏览器兼容性问题!
用CSS来实现,不支持IE其它主流浏览器都支持!

CSS代码如下:
.link-img-wrapper{
	display:inline; 
	float:left; 
	overflow:hidden; 
	width:480px; 
	height:180px;
}
.link-img-wrapper:hover img{
	-webkit-transition:.3s linear;
	-moz-transition:.3s linear;
	-o-transition:.3s linear;
	-ms-transition:.3s linear;
	transition:.3s linear;
	-webkit-transition-delay:300ms;
	-moz-transition-delay:300ms;
	-o-transition-delay:300ms;
	-ms-transition-delay:300ms;
	transition-delay:300ms;
	-webkit-transform:rotate(5deg) scale(1.2);
	-moz-transform:rotate(5deg) scale(1.2);
	-o-transform:rotate(5deg) scale(1.2);
	-ms-transform:rotate(5deg) scale(1.2);
	transform:rotate(5deg) scale(1.2);
}
.link-img-wrapper img{
	width:100%;
	min-height:100%;
}


HTML代码:
<a class="link-img-wrapper" href="">
<img src="20131206024433919.jpg" />
</a>


鼠标触摸效果:
\

鼠标移开时:
\
标签: 鼠标功能图片
前端 全部»
猜你也喜欢看这些 ······
这些是最新的 ······