這是一款可以用來遮罩網(wǎng)站banner或廣告的動畫特效插件。該特效使用的是 CSS3 animations。注意不是所有的瀏覽器都支持 CSS3 animations。如果你對 CSS3 animations還不了解，建議你先閱讀W3C CSS Animations。

HTML

html結(jié)構(gòu)如下：

Lost at sea?

Relax - we've got your rudder.

為了讓你明白上面的Html結(jié)構(gòu)，我們先從“船”部分講起：

現(xiàn)在來看第一個demo，在“船”上有三個動畫元素，

1、第一個動畫元素使船從左向右運動的slider，該動畫直接應(yīng)用于無序列表上(ul元素)。

2、第二個動畫元素使船上下擺動-模擬船在水中行進(jìn)的效果。該動畫應(yīng)用于“船”上(li元素)。

3、第三個動畫元素是文字的淡入淡出效果。該動畫應(yīng)用于div question-mark。(li中的div)

子元素除了做自己的動畫外還做父元素的動畫。根據(jù)這個原理，我們在制作類似動畫時盡量使用父子結(jié)構(gòu)的html結(jié)構(gòu)。

CSS代碼請參考下載文件。

總結(jié)

以上是生活随笔為你收集整理的html广告条效果,css3炫酷网站banner广告动画特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。