CSS3重构百度图片首页中图片展示效果

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

CSS3重构百度图片首页中图片展示效果

今天使用百度图片搜索图片时,无意之中看到首页的图片展示效果具有旋转、阴影等效果。好奇之下查看其源码,使用了一些CSS3属性制作,但不知道出与什么原因,在制作这个效果中并不什么完美(我个人认为),于是动手自己整了一个,放上来与大家分享,希望大家喜欢

demodownload

HTML结构

<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_meinv.jpg">
    <p>美女</p>
  </a>
</div>

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
}
#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;
}

demodownload

如需转载,烦请注明出处:http://www.w3cplus.com/demo/image-baidu.html

Air Force 1 Low Upstep BR

如需转载,烦请注明出处:https://www.w3cplus.com/demo/463.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部