图片呼吸灯，CSS3图片阴影+鼠标移上放大图片
一个CSS3图片链接效果，并且给图片加上边框阴影的漂亮效果，有人把这种效果称为“图片呼吸灯”，当鼠标移到图片上的时候，图片会瞬时放大显示，像是在“呼吸”，鼠标移走后则图...
li img:hover {
-webkit-transform: scale(3); //这里修改放大的倍数
transform: scale(3);
box-shadow: 0px 0px 18px rgba(0,0,0,.5);
}
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>图片呼吸灯，CSS3图片鼠标移上放大图片</title>
<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(3);
transform: scale(3);
box-shadow: 0px 0px 18px rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="test">
<ul>
<li><a href="#"><img src="/img/1.jpg" width="140" height="80" alt=""></a></li>
<li><a href="#"><img src="/img/2.jpg" width="140" height="80" alt=""></a></li>
<li><a href="#"><img src="/img/3.jpg" width="140" height="80" alt=""></a></li>
<li><a href="#"><img src="/img/3.jpg" width="140" height="80" alt=""></a></li>
<li><a href="#"><img src="/img/2.jpg" width="140" height="80" alt=""></a></li>
<li><a href="#"><img src="/img/1.jpg" width="140" height="80" alt=""></a></li>
<li><a href="#"><img src="/img/1.jpg" width="140" height="80" alt=""></a></li>
<li><a href="#"><img src="/img/2.jpg" width="140" height="80" alt=""></a></li>
<li><a href="#"><img src="/img/3.jpg" width="140" height="80" alt=""></a></li>
</ul>
</div>
</body>
</html>