CSS3圖片放大加陰影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test1</title>
<style>
ul{
float: left;
margin-left: 10px;
padding-left: 15px;
width: 265px;
border: 1px solid black;
}
ul:hover{
box-shadow: 3px 3px 10px black;
}
li{
list-style-type:none;
}
img{
margin-top: 15px;
weight:250px;
height: 250px;
}
img:hover{
transform: scale(1.1);
transition: transform 1s;
}
</style>
</head>
<body>
<ul>
<li><img src="img/1.bmp" /></li>
<li><h3>商品1</h3></li>
<li>商品描述</li>
</ul>
<ul>
<li><img src="img/2.bmp" /></li>
<li><h3>商品2</h3></li>
<li>商品描述</li>
</ul>
<ul>
<li><img src="img/3.bmp" /></li>
<li><h3>商品3</h3></li>
<li>商品描述</li>
</ul>
<ul>
<li><img src="img/4.bmp" /></li>
<li><h3>商品4</h3></li>
<li>商品描述</li>
</ul>
</body>
</html>
效果如下
gifhome_1472x464_4s.gif
