3.带动画效果的图片翻转

前端工程师常见的另外一个现象是，当用户将鼠标放到图片上时，变换为另一张图片。在这个技巧中，让我们看看如何让图片从一个到另一个渐变切换，而不是直接简单的交换两张图片。实现这个效果的CSS和HTML如下：

1
2
3

	div.swapper img { -webkit-transition: opacity 1s ease-in-out; }
	img.img1, div.swapper:hover img.img2 { opacity: 1.0; }
	div.swapper:hover img.img1, img.img2 { opacity: 0; }

1
2
3
4

<div class="swapper">
	<img class="img1" style="position: absolute;" src="megan.jpg">
	<img class="img2" src="megan2.jpg">
</div>

在这里，”transition”属性使用简化符号来指定（图片）过渡的所有参数。第一个参数将属性指定为动画，第二个参数指定时间，第三个参数为简便指定时间功能。”ease-in-out”只是众多你可以自由支配的时间功能中的一个。你还可以指定一个线形变换、渐入、渐出或高级的立体贝塞尔曲线效果！

你可以自己亲身体验一下这个效果，如下图所示：

截图4. 一个CSS只能制定一个渐变效果

设想: 纯CSS的渐变效果！

4.CSS 多卷布局

使用纯CSS，而不用HTML的table来实现多卷是件相当棘手的事情。但是，由于CSS3用于多卷布局的属性在WebKit中已经被支持，你可以通过明确的定义卷数，正确实现你所想要的效果。先看一下下面的CSS和HTML代码：

1
2
3
4
5
6
7
8

#columns {
	-webkit-column-count: 3;
	-webkit-column-gap: 25px;
	-moz-column-count: 3;
	-moz-column-gap: 25px;
	column-count: 3;
	column-gap: 25px;
}

1
2
3
4
5

<div id="columns">
	<p>Column A</p>
	<p>Column B</p>
	<p>Column C</p>
</div>

这些代码定义了这个DIV应该被分成3卷。HTML中的每个段落正好就在他们自己的卷里面(这并不是说必须要用3个

来显示每个卷，事实上卷数和P标签是无关的。)。

这些代码同样说明了在使用尚未成为W3C标准的部分CSS样式时的一种可靠机制。这段代码指定了”column-count”和”column-gap”属性，并带有”-webkit”和”-moz”前缀，以及没有前缀的情况。这意味着这段代码将会像Mozilla核心浏览器一样可以在WebKit的浏览器中运行，而且一旦CSS3标准被最终确定下来之后，那些前缀就可以去掉了，而没有前缀的代码也将可以被执行。

你可以在下面看到效果：

截图5. 多卷

使用这种方法后，如果浏览器不支持多卷布局，段落将一个接着一个显示，就像没有设置多卷一样。正如本文前面提到的，这些方法在不支持它们的浏览器中会被降级（也就是无效）。