这是一款可以用来遮罩网站banner或广告的动画特效插件。该特效使用的是 CSS3 animations。注意不是所有的浏览器都支持 CSS3 animations。如果你对 CSS3 animations还不了解，建议你先阅读W3C CSS Animations。

HTML

html结构如下：

为了让你明白上面的Html结构，我们先从“船”部分讲起：

现在来看第一个demo，在“船”上有三个动画元素，

1、第一个动画元素使船从左向右运动的slider，该动画直接应用于无序列表上(ul元素)。

2、第二个动画元素使船上下摆动-模拟船在水中行进的效果。该动画应用于“船”上(li元素)。

3、第三个动画元素是文字的淡入淡出效果。该动画应用于div question-mark。(li中的div)

子元素除了做自己的动画外还做父元素的动画。根据这个原理，我们在制作类似动画时尽量使用父子结构的html结构。

CSS代码请参考下载文件。