细说百度图片栏目——图片展示效果

#box-shadow #Transform #transition #会员专栏

发布于大漠

12 年前

今天写个DEMO效果时，无意之中在Baidu图片中发现其图片列表使用了CSS3的transform,transition,box-shadow等属性。这是不是可以说百度在开始引领国内的CSSer开始使用CSS3相关属性呢？如果是的话，那这对于前端开发人员来说是一件福事。毕竟百度是国内互联网中大企业之一，他的一些举动都将有很多前端人员跟随着。这些都是我个人的猜想，仅供参考，因为我就是一个CSS3的爱好者，今天我想拿这个效果来说说自己的想法。如有不对还请谅解。

首先百度图片首页，有一个图片展示的效果，在这个效果中使用了CSS3的transform，transition，box-shadow等属性，制作了鼠标悬浮时，图片有一个背景的旋转效果：

细看了一下样式源码，其在以下几个地方使用了CSS3效果：

1、标题透明效果——opacity

每张图片标题上使用了opacity属性制作了透明背景效果：

2、平滑过渡动画——transition

为了让鼠标悬浮时，图片背景卡片旋转有一个平滑效果，在这里使用了transition的效果

3、背景卡面旋转——transform

最明显的效果就是在鼠标悬浮时，图片背景卡片有一个旋转效果，这个效果是使用transform的rotate和translate来实现的：

4、图片阴影效果——box-shadow

同时在图片上添加了一个略淡的阴影效果，这个效果是使用box-shadow来实现的：

上面简单的展示了这个效果中使用到的CSS3属性，以及其对应的代码，为了更好的说明这些问题，一起先看看这个效果实现的过程：

HTML结构

同样，先从其结构下手，我们一起来看看其结构：

<div id="index_tags">
  <a href="#">
    <div class="bg_wrapper left"><div></div></div>
    <div class="bg_wrapper right"><div></div></div>
    <img width="115" height="115" src="http://list.image.baidu.com/t/image/w_meinv.jpg">
    <p>美女</p>
  </a>
	...
	<a href="#">
    <div class="bg_wrapper left"><div></div></div>
    <div class="bg_wrapper right"><div></div></div>
    <img width="115" height="115" src="http://list.image.baidu.com/t/image/w_meinv.jpg">
    <p>美女</p>
  </a>
</div>

整体的结构请看下面的截图（来自于：image.baidu.com的源代码）

结构很清晰，简单的来描述一下各个标签所起的作用：

<div id="index_tags"></div>：这个div是整个图片列表的容器，放置了10个图片；
<a href="#"></a>：链接a标签，这个标签包含了图片相关信息，以及包含了制作效果所需的辅助标签；
<div class="bg_wrapper left"><div></div></div>:用来制作图片背景卡片向左旋转效果的辅助标签；
<div class="bg_wrapper right"><div></div></div>：这组标签和上面的一样，只是用来辅助实现右旋转效果；
<div></div>:div.bg_wrapper里面包含了一个div标签，这个标签主要用来模拟灰色背景效果；
<img />：这个大家都清楚了，就是效果中的图片标签；
<p></p>：p标签是制作图片标题信息的容器；

标签一目了然，接下来，我将这个效果的源码扒出来，想和大家一起探讨一下，或者说说我自己的观点：

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;
	background: rgb(51, 51, 51);
	border-top:1px solid #222;
	height:22px;
	line-height:22px;
	color:#fff;
	opacity:0.6;
	filter:alpha(opacity=60);
	cursor:pointer
}
#index_tags a div.bg_wrapper{
	position:absolute;
	left:-5px;
	top:-5px;
	width:125px;
	height:125px;
	border:1px solid #aaa;
	background:#fff;
	visibility:hidden;
	-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
}
#index_tags a div.bg_wrapper div{
	margin:4px;
	background:#666;
	width:116px;
	height:116px
}
#index_tags a:link,
#index_tags a:visited{
	text-decoration:none
}
#index_tags a:hover{
	zoom:1;
	z-index:20;
	text-decoration:underline
}
#index_tags a:hover div.bg_wrapper{
	visibility:visible;
	*visibility:hidden;
	visibility:hidden \0
}
#index_tags a:hover div.bg_wrapper.left{
	-webkit-transform:rotate(6deg) translate(6px,-1px);
	-moz-transform:rotate(6deg) translate(6px,-1px);
	-o-transform:rotate(6deg) translate(6px,-1px);
	-transform:rotate(6deg) translate(6px,-1px)
}
#index_tags a:hover div.bg_wrapper.right{
	-webkit-transform:rotate(-5deg) translate(-5px,1px);
	-moz-transform:rotate(-5deg) translate(-5px,1px);
	-o-transform:rotate(-5deg) translate(-5px,1px);
	-transform:rotate(-5deg) translate(-5px,1px)
}
#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
}
#index_tags a:hover p{
	text-decoration:underline
}
#index_tags.hover_disable div.bg_wrapper{
	display:none
}

接下来细说一下各部分代码所起的作用，以及存在的问题（我个人觉得不妥的地方，当然其他同学会有更高的见解）：

1、基本布局

给容器固定一个总宽度，并且使其水平居中，同时使用“display”的“inline-block”改变链接元素的默认显示样式：

#index_tags{
	width:625px;/*设置容器宽度，容器宽度=（列表项宽度+间距宽度）*列表项个数*/
	position:relative;/*设置相对定位*/
	left:5px;/*容器向右移动5px*/
	margin:30px auto 15px auto;/*元素水平居中*/
}
#index_tags a{
	display:inline-block;/*改变链接默认显示风格，使用元素同一行显示，类似于float效果*/
	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
}

这里没有采用float布局，而是采用“display:inline-block”实现类似于“float”的效果，但是存在一个问题，断行输写html标签，会增加额外空间，此空间大小由元素的字号决定，这样一来就会出现元素被挤下的效果：

但是百度图片首页的并没有掉下去，我个人猜想其结构上做了一定的修改，没有让a元素换行显示。那么为了解决这样的问题，我在“#index_tags”中简单的加了一个“font-size:0”来处理，详细的处理方法可以点击我。

2、图片标题透明效果

图片标题透明效果，百度采用的方法是“opacity”来控制：

#index_tags a p{
	position:absolute;
	width:100%;
	bottom:0;
	left:0;
	background: rgb(51, 51, 51);
	border-top:1px solid #222;
	height:22px;
	line-height:22px;
	color:#fff;
	opacity:0.6;
	filter:alpha(opacity=60);
	cursor:pointer
}

如果仅想让背景透明，而不影响文本，我个人觉得这样直接处理的方法并不是十分适当的方法，因为使用“opacity”属性来控制元素的透明度，会影响其子元素的透明程度。如果仅实现背景半透明，我更建议使用“rgba”来处理：

filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99333333', endColorstr='#99333333');
background:rgba(51,51,51,0.6);

直接在线上修改一下，大家看看他们的对比效果：

此处不明白百度图片的用意，不敢妄加评论，取决由大家。如果你不太了解详细的使用方法，可以点击：这和这，你也可以点击这里查看他的兼容处理方法。

3、图片背景卡片效果

这步的效果是百度图片首页图片展示效果中最复杂的一个效果，从他的代码中可以看出，他为了写这个效果增加了四个额外的“div”标签，用来模仿制作两个背景卡片，同时使用CSS3中的transform属性来制作旋转效果，而且一个左旋转，一个右旋转，详细的来看看这个效果的实现。

背景卡的效果：

#index_tags a div.bg_wrapper{
	position:absolute;
	left:-5px;
	top:-5px;
	width:125px;
	height:125px;
	border:1px solid #aaa;
	background:#fff;
	visibility:hidden;
	-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
}
#index_tags a div.bg_wrapper div{
	margin:4px;
	background:#666;
	width:116px;
	height:116px
}

默认情况下，背景卡是隐藏不可见的：

#index_tags a:hover div.bg_wrapper{
	visibility:visible;
	*visibility:hidden;
	visibility:hidden \0
}

背景卡旋转效果

#index_tags a:hover div.bg_wrapper.left{
	-webkit-transform:rotate(6deg) translate(6px,-1px);
	-moz-transform:rotate(6deg) translate(6px,-1px);
	-o-transform:rotate(6deg) translate(6px,-1px);
	-transform:rotate(6deg) translate(6px,-1px)
}
#index_tags a:hover div.bg_wrapper.right{
	-webkit-transform:rotate(-5deg) translate(-5px,1px);
	-moz-transform:rotate(-5deg) translate(-5px,1px);
	-o-transform:rotate(-5deg) translate(-5px,1px);
	-transform:rotate(-5deg) translate(-5px,1px)
}

这个效果很意思，使用了css3的transform属性来实现背景卡旋转效果：

效果是实现了，但我认为并不完美，第一点，不知道是程序员有疏忽还是什么原因，语法都有用错：

	-transform:rotate(-5deg) translate(-5px,1px)

上面这种写法不知道是从何而来，有点搞不明白，一开始还以为是最新的写法，但查证后没有这方面的介绍。其他同学不知道有没有知道的。（这不是我挑东西，只是觉得不应该出现这样的问题）。

其二，既然使用了css3为什么不考虑ie9下的效果呢？其实使用css3完全可以达到一致的效果，还有就是采用了渐近增加来做ie6-8的效果，那为何要新增四个额外的标签来做这两个背景卡呢？我觉得有点画蛇添足，完全CSS3就能搞定的事情，下面我做了一下修改：

修改后的结构：

<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>

纯CSS3制作背景卡片：

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

采用css3的“:after”和“:before”来制作两个背景卡，当然这里还需要运用到“background-clip”、“box-shadow”等属性，同样离不开“transform”的属性，还有一个关键点，就是他们的层级关系“z-index”，详细的可以参阅后面我写的DEMO（如果你感兴趣的话）。

4、图片阴影效果

鼠标悬浮状态下时，给图片添加了一个阴影效果，这个效果是使用box-shadow来实现的：

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

到这一步，效果就算是出来了，大家可以看看百度图片这个效果在各浏览器下的效果显示：

那么百度图片首页中图片展示效果就扯到这了，下面附上一份我自己修改后的效果：

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

各浏览器下的效果：

再次声明一下，今天拿百度图片来做案例，只是想让自己通过大企业做的东西去思考一些东西，并不是想拿他来说事情，何况我也没有这样的能力。在这个案例中告诉我两点：其一，CSS3并不像大家平时讨论的那样，在中国将是遥遥无期，最起码百度这样的大公司在开始用了，他可是行内的风向标，这让我们前端从业人员是不是对CSS3有点曙光了。其二，想表达的是，大公司做的东西不一定就是最好的，只能借来学习，知道一个方向，实质性的东西还是要自己去动手写的。（^_^）想说的就这些了，希望写这份博客不会得罪人，更希望这篇博文能给同学们带来些许帮助。

如需转载，烦请注明出处：https://www.fedev.cn/css3/image-baidu.html

jordan shoes for sale outlet china