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

今天写个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>
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

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

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

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