HTML5网页设计

图片效果

CSS3鼠标滑过图片放大展示效果

时间:2014-12-01 11:02来源:未知作者:user点击:
利用CSS3的hover鼠标滑过实现图片放大展示效果,请使用支持CSS3的浏览器测试效果!

利用CSS3的hover鼠标滑过实现图片放大展示效果,请使用支持CSS3的浏览器测试效果!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>CSS3鼠标滑过图片放大展示效果 - ShejiCool.com</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(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.shejicool.com/images/demo/400_1.jpg" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="http://www.shejicool.com/images/demo/400_2.jpg" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="http://www.shejicool.com/images/demo/400_3.jpg" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="http://www.shejicool.com/images/demo/400_4.jpg" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="http://www.shejicool.com/images/demo/400_1.jpg" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="http://www.shejicool.com/images/demo/400_2.jpg" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="http://www.shejicool.com/images/demo/400_1.jpg" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="http://www.shejicool.com/images/demo/400_4.jpg" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="http://www.shejicool.com/images/demo/400_3.jpg" width="140" height="80" alt=""></a></li>
  </ul>
  <p style="text-align:center">请使用支持CSS3的浏览器测试效果!</p>
</div>
</body>
</html>
上一篇:上一篇:jQuery实现自动缩放图片 上一篇:下一篇:CSS3实现的图片模糊过滤效果
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐