图片呼吸灯，CSS3图片阴影+鼠标移上放大图片

2014-04-07 06:36:21 -0400

代码说明

一个CSS3图片链接效果，并且给图片加上边框阴影的漂亮效果，有人把这种效果称为“图片呼吸灯”，当鼠标移到图片上的时候，图片会瞬时放大显示，像是在“呼吸”，鼠标移走后则图片恢复原始大小，可作为一个图片列表的显示效果，用于图片站、旅游风景站或产品站都可以哦。因CSS3技术所以测试请用Chrome或火狐。转自源码爱好者

HTML代码

<style type="text/css">
* {
	padding: 0;
	margin: 0
}
body {
	background-color: #eee;
}
.test {
	width: 540px;
	margin: 40px auto 0
}
li {
	width: 180px;
	height: 120px;
	float: left;
	list-style: none
}
li img {
	display: block;
	width: 140px;
	height: 80px;
	padding: 8px;
	background-color: #FFF;
	box-shadow: 0px 0px 18px rgba(0,0,0,.4);
	-webkit-transition: all ease .3s;
	transition: all ease .3s
}
li img:hover {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	box-shadow: 0px 0px 18px rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="test">
  <ul>
    <li><a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s1.jpg" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s2.jpg" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s3.jpg" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s4.jpg" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s5.jpg" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s6.jpg" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s7.jpg" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s8.jpg" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s9.jpg" width="140" height="80" alt=""></a></li>
  </ul>
</div>
</body>
</html>

代码演示

«Newer Older»

Back to home

Subscribe | Register | Login | N