CSS3 Transition 轉場動畫應用實例 - 滑動廣告篇

再來一篇換湯不換藥的範例，我們稱它為滑動廣告！其觀念是與前篇一模一樣，僅僅是 HTML 結構不一樣而已！請各位仔細聽我說來...

若還不熟悉請見以下兩篇文章～

1. 淺談 CSS3 Transition 轉場動畫效果
2. CSS3 Transition 轉場動畫應用實例 - 滑動選單篇

• Demo
• Download

---

簡單的描述一下 <div> 的關鍵屬性：

• <div.mask>：設定 overflow 為 hidden，將超出範圍的部份隱藏起來。
• <div.boxWrap>：包覆 <div.box1> 與 <div.bo2> 區塊，便於移動控制。
• <div.box1>：放入所需資訊。
• <div.box2>：放入所需資訊。

---

載入畫面後的一般狀態如下圖左所示；當滑鼠滑入（:hover）到 <div.boxWrap> 時，區塊屬性的變化如下圖右所示：

聰明的各位是不是已經發現不同點了呢?

沒錯!!就是在滑入的狀態時，<div.boxWrap> 區塊的 margin-top 的屬性值設定為 -179 px，使得整個區塊往上移動。由於上層區塊（父層）<div.mask> 設定了 overflow 屬性，所以超出 <div.mask> 的部份得以隱藏。接下來，我們就來看一下 CSS3 coding。

載入畫面時的一般狀態，其 CSS 設定如下:

再來...加上擬類別的( :hover )狀態，並設定其屬性值即可完成。