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

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

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

首先百度图片首页,有一个图片展示的效果,在这个效果中使用了CSS3的transformtransitionbox-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的源代码)

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

  1. <div id="index_tags"></div>:这个div是整个图片列表的容器,放置了10个图片;
  2. <a href="#"></a>:链接a标签,这个标签包含了图片相关信息,以及包含了制作效果所需的辅助标签;
  3. <div class="bg_wrapper left"><div></div></div>:用来制作图片背景卡片向左旋转效果的辅助标签;
  4. <div class="bg_wrapper right"><div></div></div>:这组标签和上面的一样,只是用来辅助实现右旋转效果;
  5. <div></div>:div.bg_wrapper里面包含了一个div标签,这个标签主要用来模拟灰色背景效果;
  6. <img />:这个大家都清楚了,就是效果中的图片标签;
  7. <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有点曙光了。其二,想表达的是,大公司做的东西不一定就是最好的,只能借来学习,知道一个方向,实质性的东西还是要自己去动手写的。(^_^)想说的就这些了,希望写这份博客不会得罪人,更希望这篇博文能给同学们带来些许帮助。

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

返回顶部