清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3重构百度图片首页中图片展示效果|w3cplus</title>
<meta name="keywords" content="css3学习,css3属性详解,css3 transition,如何学好css3">
<meta name="description" content="W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。">
<link rel="shortcut icon" href="http://www.w3cplus.com/sites/all/themes/marvin/favicon.ico">
<link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
<style type="text/css">
body{
background:none repeat scroll 0 0 #fff;
font:12px arial;
text-align:center;
position:relative
}
body,p,form,ul{
margin:0;
padding:0
}
img{
border:0
}
td,p,div{
font-size:12px
}
p{
width:600px;
margin:0;
padding:0;
}
a{
color:#00c
}
a:active{
color:#f60
}
/*图片效果*/
#index_tags{
width:625px;
position:relative;
left:5px;
margin:30px auto 15px auto;
font-size:0;
}
#index_tags a{
display:inline-block;
width:115px;
height:115px;
margin:0 10px 10px 0;
position:relative;
text-decoration:none;
text-align: center;
}
#index_tags a img{
position:absolute;
left:0;
top:0;
background:#fff;
width:115px;
height:115px
}
#index_tags a p{
position:absolute;
width:100%;
bottom:0;
left:0;
border-top:1px solid #222;
height:22px;
line-height:22px;
color:#fff;
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99333333', endColorstr='#99333333');
background:rgba(51,51,51,0.6);
cursor:pointer
}
#index_tags a:before,
#index_tags a:after {
content:"";
display: block;
width: 116px;
height: 116px;
left:-5px;
top:-5px;
border: 4px solid #fff;
background:#666;
visibility:hidden;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
-o-background-clip: padding-box;
-ms-background-clip: padding-box;
background-clip: padding-box;
box-shadow: 0 0 1px #aaa,0 0 2px #aaa;
-webkit-transition:-webkit-transform 0s ease-in;
-moz-transition:-moz-transform 0s ease-in;
-o-transition:-o-transform 0s ease-in;
transition:transform 0s ease-in;
position:absolute;
}
#index_tags a:link,
#index_tags a:visited{
text-decoration:none
}
#index_tags a:hover{
zoom:1;
z-index:20;
text-decoration:underline
position:relative;
}
#index_tags a:hover:before,
#index_tags a:hover:after{
visibility:visible;
}
#index_tags a:hover:before{
-webkit-transform:rotate(8deg) translate(6px,-1px);
-moz-transform:rotate(8deg) translate(6px,-1px);
-o-transform:rotate(8deg) translate(6px,-1px);
-ms-transform:rotate(8deg) translate(6px,-1px);
transform:rotate(8deg) translate(6px,-1px);
z-index:2;
}
#index_tags a:hover:after{
-webkit-transform:rotate(-8deg) translate(-5px,1px);
-moz-transform:rotate(-8deg) translate(-5px,1px);
-o-transform:rotate(-8deg) translate(-5px,1px);
-ms-transform:rotate(-8deg) translate(-5px,1px);
transform:rotate(-8deg) translate(-5px,1px);
z-index:1;
}
#index_tags a:hover img{
left:-5px;
top:-5px;
padding:4px;
border:1px solid #aaa;
-moz-box-shadow:1px 1px 3px #888;
-webkit-box-shadow:1px 1px 3px #888;
box-shadow:1px 1px 3px #888;
z-index:3;
}
#index_tags a:hover p{
text-decoration:underline;
z-index: 4;
}
</style>
</head>
<body>
<div class="wrap_top_nav">
<nav id="top_nav">
<ul class="inline-style clearfix">
<li><a href="http://www.w3cplus.com" target="_blank">w3cplus</a></li>
<li><a href="http://www.w3cplus.com/resources/css3-tutorial-and-case" target="_blank">css3详解教程</a></li>
<li><a href="http://www.w3cplus.com/demos/list.html" target="_blank">css3实例</a></li>
<li><a href="http://www.w3cplus.com/demo/tags/242.html" target="_blank">藤藤每日一练</a></li>
</ul>
<a id="read" href="http://www.w3cplus.com/demo/image-baidu.html" target="_blank">查看原文>></a>
</nav>
</div>
<div class="page">
<header id="header">
<hgrounp class="white blank">
<h1>CSS3重构百度图片首页中图片展示效果</h1>
<h2>作者：大漠(如有更好建议或疑问请加群：1041263)<h2>
</hgrounp>
</header>
<section class="demo">
<div id="index_tags">
<a href="#">
<img width="115" height="115" src="http://list.image.baidu.com/t/image/w_meinv.jpg">
<p>美女</p>
</a>
<a href="#">
<img width="115" height="115" src="http://list.image.baidu.com/t/image/w_quweigaoxiao.jpg">
<p>趣味搞笑</p>
</a>
<a href="#">
<img width="115" height="115" src="http://list.image.baidu.com/t/image/w_mengchong.jpg">
<p>萌宠</p>
</a>
<a href="#">
<img width="115" height="115" src="http://list.image.baidu.com/t/image/w_sheying.jpg">
<p>摄影</p>
</a>
<a href="#">
<img width="115" height="115" src="http://list.image.baidu.com/t/image/w_lvyoufengjing.jpg">
<p>旅游风景</p>
</a>
<a href="#">
<img width="115" height="115" src="http://list.image.baidu.com/t/image/w_meishi.jpg">
<p>美食</p>
</a>
<a href="#">
<img width="115" height="115" src="http://list.image.baidu.com/t/image/w_fushidapei.jpg">
<p>服饰搭配</p>
</a>
<a href="#">
<img width="115" height="115" src="http://list.image.baidu.com/t/image/w_jiajuzhuangshi.jpg">
<p>家居装饰</p>
</a>
<a href="#">
<img width="115" height="115" src="http://list.image.baidu.com/t/image/w_chuangyisheji.jpg">
<p>创意设计</p>
</a>
<a href="#">
<img width="115" height="115" src="http://list.image.baidu.com/t/image/w_dongmanyouxi.jpg">
<p>动漫游戏</p>
</a>
</div>
</section>
</div>
</body>
</html>