這是一款可以用來遮罩網站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代碼請參考下載文件。