酷斃了！三種風格的全屏幻燈片效果【附源碼下載下傳】

　　溫馨提示：為保證最佳的效果，請在 IE10+、Chrome、Firefox 和 Safari 等現代浏覽器中浏覽。

　　我們先定義一個簡單的初始結構，能夠指定在每個面闆（或幻燈片）中哪張圖像會顯示，然後建立我們的重複結構的片段。是以，最初我們希望是這樣的：

　　為了能夠通過把圖檔分解成片段來實作動畫效果，我們将需要為每個面闆定義下面這樣的結構：

　　當然，你可能看上面的結構可能會問為什麼不使用背景圖檔而用圖像元素？其實在嘗試使用各種方式對比之後，我們在試驗後得出結論，使用背景圖像與設定背景大小的方式可能會導緻過渡效果有問題。例如使用 background-size: cover 會導緻轉換動畫出現顫抖現象。

　　首先，我們在全屏模式，是以為了讓我們的頁面布滿視窗，需要設定如下：

　　主容器和子元素都将絕對定位，面闆将占據所有的寬度和高度：

　　由于我們的效果将可能有元素超出自己的區域，我們還需要確定不會溢出：

您可能感興趣的相關文章

<a href="http://www.cnblogs.com/lhb25/p/a-collection-of-page-transitions.html" target="_blank">太贊了！超炫的頁面切換動畫效果【附源碼下載下傳】</a>

<a href="http://www.cnblogs.com/lhb25/p/transitions-for-off-canvas-navigations.html" target="_blank">創意無限！一組網頁邊欄過渡動畫【附源碼下載下傳】</a>

<a href="http://www.cnblogs.com/lhb25/p/page-loading-effects.html" target="_blank">好東西！動感的頁面加載動畫效果【附源碼下載下傳】</a>

<a href="http://www.cnblogs.com/lhb25/p/slicebox-3d-image-slider.html" target="_blank">使用 CSS3 實作3D圖檔滑塊效果【附源碼下載下傳】</a>

<a href="http://www.cnblogs.com/lhb25/p/the-design-samsung-grid-loading-effect.html" target="_blank">時尚設計！三種奇特網格加載效果【附源碼下載下傳】</a>

歡迎任何形式的轉載，但請務必注明出處。