不一样的层叠照片动画-ANIMATED CSS3 PHOTO STACK

今天我要给大家介绍一款动画的照片堆叠插件，两张照片之间有多种切换效果可供我们选择，而这些效果仅仅使用到了css3，所以要想使用该插件，就必需是支持css3的浏览器和设备。该插件也会更新到可以像幻灯片一样去使用。

使用步骤

1、引入以下的js和css文件

<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/animate.css" rel="stylesheet">
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/script.js"></script>

2、在body标签中加入以下格式的html代码，整个外部容器就是一个ID为 photos 的ul标签元素，里面包含的每张图片则是一个 li 标签，而图片是以背景图片的形式显示的。

<ul id="photos">
    <li>
        <a href="http://www.flickr.com/photos/brockwhittaker/8500935165/"style="background-image:url(http://farm9.staticflickr.com/8233/8500935165_2835685f30.jpg);">Landscape 5</a>
    </li>
    <li>
        <a href="http://www.flickr.com/photos/31538238@N07/8412935103/"style="background-image:url(http://farm9.staticflickr.com/8507/8412935103_b1af667772_z.jpg);">Landscape 4</a>
    </li>
    <li>
        <a href="http://www.flickr.com/photos/zanthia/8461978995/" style="background-image:url(http://farm9.staticflickr.com/8388/8461978995_1a4a48ca14_c.jpg);">Landscape 3</a>
    </li>
    <li>
        <a href="http://www.flickr.com/photos/29066067@N02/8452950806/"style="background-image:url(http://farm9.staticflickr.com/8233/8452950806_3faf2a6546_z.jpg);">Landscape 2</a>
    </li>
    <li>
        <a href="http://www.flickr.com/photos/zanthia/8477608906/" style="background-image:url(http://farm9.staticflickr.com/8094/8477608906_a02f8d5774_z.jpg);">Landscape 1</a>
    </li>
[/code]
</ul>

3、插入导航按钮的 html 代码，实际上就是两个 a 标签

<a href="#" class="arrow previous"></a> <a href="#" class="arrow next"></a>

该插件没有提供参数配置，不过大家可以查看js源码去修改相关的参数。

PREVIOUS:
NEXT:
五彩的带图标的动画菜单
有趣的圆形幻灯片-FLIPPING CIRCLE SLIDESHOW