css打造一个动画效果的图片墙
2012-08-26 23:44 1621 0
今天我们将开始建立另一个有趣的CSS演示。这次我们将创建一个大的、无缝的照片墙。当用户将鼠标悬停于一个图像,一个透明的黑色渐变效果覆盖在其上面。
Demo:点击这里
HTML代码
第一步我们需要创建一个大概的结构，只需要一个div和无序的列表li。
<div class="container">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
然后将图片元素放进去，先占着位置。
<div class="container">
<ul>
<li><p></p><img src=""></li>
<li><p></p><img src=""></li>
<li><p></p><img src=""></li>
</ul>
</div>
现在是不是开始有点感觉了？那我们可以添加具体的图片和文字信息了（你想添加什么都可以，不过要保证你的照片规格为320x213）。
<div class="container">
<ul>
<li><p>big</p><img src="http://lorempixum.com/320/213/transport/1"></li>
<li><p>small</p><img src="http://lorempixum.com/320/213/transport/2"></li>
<li><p>fast</p><img src="http://lorempixum.com/320/213/transport/3"></li>
<li><p>slow</p><img src="http://lorempixum.com/320/213/transport/4"></li>
<li><p>awesome</p><img src="http://lorempixum.com/320/213/transport/5"></li>
<li><p>convenient</p><img src="http://lorempixum.com/320/213/transport/6"></li>
<li><p>necessary</p><img src="http://lorempixum.com/320/213/transport/7"></li>
<li><p>fun</p><img src="http://lorempixum.com/320/213/transport/8"></li>
<li><p>boring</p><img src="http://lorempixum.com/320/213/transport/9"></li>
<li><p>crazy</p><img src="http://lorempixum.com/320/213/transport/10"></li>
<li><p>boring</p><img src="http://lorempixum.com/320/213/transport/1"></li>
<li><p>small</p><img src="http://lorempixum.com/320/213/transport/2"></li>
<li><p>fast</p><img src="http://lorempixum.com/320/213/transport/3"></li>
<li><p>slow</p><img src="http://lorempixum.com/320/213/transport/4"></li>
<li><p>awesome</p><img src="http://lorempixum.com/320/213/transport/5"></li>
<li><p>convenient</p><img src="http://lorempixum.com/320/213/transport/6"></li>
<li><p>necessary</p><img src="http://lorempixum.com/320/213/transport/7"></li>
<li><p>fun</p><img src="http://lorempixum.com/320/213/transport/8"></li>
<li><p>boring</p><img src="http://lorempixum.com/320/213/transport/9"></li>
<li><p>crazy</p><img src="http://lorempixum.com/320/213/transport/10"></li>
</ul>
</div>
就如你看到的，我用了很多图片，但是为了突出照片墙的效果，这样是需要的。
容器css样式
现在,我们已经用HTML创建了一个巨大的混乱的内容,那么是时候开始CSS美化它了。这个过程的第一步是将container定位在网页中间。归根结底,我们的图像将实际上是280 px宽，每排四张图片,所以总共需要1120 px的宽度。用margin auto可以将任何元素定位在中央。
/*------CONTAINER------*/
.container {
width: 1120px;
margin: 0 auto 50px auto;
}
Media Queries
I’m not going to go full on responsive with this project, but it would be nice if it adjusted half way decently to different viewport sizes. This merely involves resetting our container width at different intervals, which effectively drops the layout from four columns down to three, two and finally one when the viewport is narrow enough.
/*------MEDIA QUERIES------*/
@media screen and (max-width: 1120px) {
.container {width: 840px;}
}
@media screen and (max-width: 840px) {
.container {width: 560px;}
}
@media screen and (max-width: 560px) {
.container {width: 280px;}
}
列表样式
创建完container容器以后，接着定义列表元素的css样式，这里包括无序列表ul，列表元素li，列表元素的鼠标移上去的效果li:hover。
下面的css样式是几乎所有的ul li代码都会用到的，总结起来时以下三点：
1.ul选择器的样式重置，因为我们需要ul是无序的并且不需要他本身的样式。
2.li元素应该左浮动。
3.li元素应该overflow: hidden
凡是采用ul li的布局，基本都需要上面的三个步骤,因为li默认的。对于我们这个项目而言，还需要额外的做到以下：
1.li元素应该用相对定位。
2.我们不需要将图片做成超链接，尽管这样我还是想让用户直观的知道自己的鼠标聚焦在哪张图片上，所以我给li加上了hover变手型指针的效果，同时这里还规定了li的宽和高，且将overflow设为hidden，这样做是为后面图片变大之后布局不会变乱做准备。
/*------LIST------*/
.container ul {
list-style-type: none;
}
.container li {
float: left;
position: relative;
width: 280px;
height: 187px;
overflow: hidden;
}
.container li:hover {
cursor: pointer;
}
文字样式
/*------PARAGRAPH------*/
.container li p {
color: transparent;
background: transparent;
font: 200 30px/187px 'Arvo', Helvetica, Arial, sans-serif;
text-align: center;
text-transform: uppercase;
position: absolute;
top: 0;
left: 0;
width: 280px;
height: 187px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.container li:hover p {
color: white;
background: #000; /*fallback for old browsers*/
background: rgba(0,0,0,0.7);
}
container li p的css代码定义了li中的文字样式.为了方便查看分成了三段。第一部分设置文字的大小和字体等。文字的颜色和背景都设置成了透明，这样我们就将文字段落隐藏了起来，留着鼠标滑进去将文字再显示出来的时候用。
文字的定位
第二部分将文字设置成了绝对定位，如果不这样做，那么文字会显示在图片的上方而不是和图片显示在同一位置。绝对定位将文字脱离了文档流。同时，我将文字段落设置了高度和宽度，看起来好像没什么用，其实我只是想为了达到当鼠标移动到图片区域时，为图片增加层的效果。
文字的 Transition效果
第三段用ease函数设置了所有p的属性在1秒之类变换。transform通过平移、旋转等方法来定义页面元素的外观。它是css3的属性。
文字的聚焦样式
当鼠标滑动到图片上去的时候，文字被设置成了白色，背景为深黑色。通过使用rgba的模式，我们能得到一种透明的效果，不过需要注意的是ie早期的版本并不支持rgba，所以我们添加了黑色背景，这样ie的低版本虽然没有得到透明效果，但至少没有太大出入。
图片样式
我们的目标是创造出当鼠标移上去的时候图片的放大效果。鼠标以上去，图片稍微变大 ，同时文字以层的方式显示出来。这里有一个技巧：我们希望图片能够放大，但是同时我们又不希望放大图片影响到我们的布局，因此上面我们将li列表元素元素设置了一个特定的宽度和高度，同时overflow为hidden，使得即使图片变大，它都在先前的边界范围之内，我们设置图片的大小为280x176，当鼠标移上去是，变成图片的实际大小320x213。
/*------IMAGES------*/
.container img {
width: 280px;
height: 187px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.container li:hover img {
width: 320px;
height: 213px;
}
看看效果
所有的工作完成了，你可以看看demo
Demo:Click Here
另外一种款式
如果刚刚你去看了我给你们的demo，你会知道里面包含了两个效果的版本。第一个叫fade（淡入淡出），也是上面我教你完成的那个。第二个是flip，有着不同的效果，如果你希望更多的选择，请看下面。
这个版本的绝大多数css代码都是一样的，主要的区别在于将文字段落的transition效果移除，把图片的css效果变成翻转。下面是代码：
/*------PARAGRAPH------*/
.container li p {
color: transparent;
background: transparent;
font: 200 30px/187px 'Arvo', Helvetica, Arial, sans-serif;
text-align: center;
text-transform: uppercase;
position: absolute;
top: 0;
left: 0;
width: 280px;
height: 187px;
}
.container li:hover p {
color: white;
background: rgba(0,0,0,0.7);
z-index: 1;
}
/*------IMAGES------*/
.container img {
width: 280px;
height: 187px;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
-ms-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.container li:hover img {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
z-index: -3;
}
