我们的HTML标签如下：
叠加层的构造将利用JavaScript插入，它作为一个固定元素放在所有其他元素之上。根据页面指示方向，为该元素供应一些CSS样式类，以精确地运用样式。叠加层将包含预先定义好的多个层。每个层都设置不同的背景颜色以及特定的动画。
页面代码类似如：
每层还设置不同的背景颜色。为了展示独特的效果，将为每个层设置不同的动画。为此，我们最初将父层设置为屏幕外（off-screen）位置，然后将该层动画化。紧张元素的初始设置在脚本中完成（见下文）。然后在样式表中定义层的动画行为，这取决于效果类，以及要显示的页面的其他样式。
CSS首先，让我们看一下我们的主体，容器和页面的一些常规样式（省略供应商前缀）：
我们希望我们的页面是全宽和高度，并隐蔽任何溢出。默认情形下，利用JS（我们利用Modernizr），页面被隐蔽，当前类将相应的页面设置为可见。我们希望确保我们的布局在没有JavaScript的情形下正常运行，因此我们添加了\公众条件\公众样式。
让我们来展示的风格是若何的。我们开始层置于所有之上，而且具有固定的位置：
根据当前利用的方向，须要设置一些初始定位样式。正如稍后将看到的JavaScript角本，我们将设置一些其他的变换，以确保我们的初始层的顶部始终是面向屏幕的那个。这将简化效果，由于内层动画将始终相同（向上移动），因此如果父项旋转并精确定位，我们无需为每个方向定义新动画：
图层将具有默认背景颜色，然后以动态办法为每个效果单独定位：
接下来，让我们看看一个示例效果。三层效果通过分外的为每个图层添加动画。anim-Effect类被添加到主体中，以便我们知道我们目前利用的是哪种效果。该revealer–animate是考虑到初始顺序和触发动画。
正如我们在这里看到的，我们将向所有图层添加相同的动画属性，但动画名称除外。通过三种不同的动画，我们定义了关键帧中每个动画的延迟。就像我们一样，我们确保所有动画在同一时候结束，但许可不同的外不雅观韶光：
我们在这里做的是让第一层先移动，然后在中间\"大众停息\公众直到75％，同时在可见屏幕的顶部。然后我们将其移向相反的方向以显示新内容。对付其他两个层也是如此，只是在这里我们在不同的关键帧处启动它们，减少\"大众停息\公众。末了一层根本没有停息，只是从25％开始到另一边。
JavaScript我们做了一个小插件，根据一些选项创建了revealer 。默认选项如下：
添加启动器及其图层和相应效果类的功能如下所示：
最关键的函数设置我们的揭密元素的初始定位，并添加用于触发动画和所选效果的控件类。
根据我们选择的方向，我们须要确保揭示元素得到精确的变换。请记住，我们只是大略地旋转和定位探测器，使顶部始终面向屏幕，以便层始终向上移动。对付角落情形，我们须要确保展示器的宽度和高度精确设置到页面的对角线。对付旁边两种情形，我们须要确保展示器的高度是屏幕的宽度，由于我们将它旋转90度。
以上讲述了通过CSS和JavaScript实现多层页面的切换动画效果，希望这个小的技巧能对你有所帮助。如果感兴趣，你还可以访问以下地址，查看动画的效果的Demo。
http://www.ikinsoft.com/demo/ani_effects/index.html
