今天，我們想向您展示如何創建平鋪背景圖像的幻燈片效果。其靈感來自于國外的一個工作室網站（圍觀），這個網站充滿了各種有趣和創意效果，一定記得去看看。

　　這個幻燈片效果是由四個區域的獨立移動構成，通過畫面分割，同時顯示出新的圖片。這里需要組合使用 CSS3 的3D轉換、過渡和動畫功能。除了這種效果我們也將添加兩個更多的變化，我們的宗旨是實現超流暢的交互體驗。

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

?

?

源碼下載?? ? ?在線演示

?

　　對于幻燈片，我們需要一個特殊的 HTML 結構來實現四個不同的頁面區域，每個區域都使用相同的圖像，但用了不同的定位，讓四個區域拼起來剛好是一張完整的背景圖片。我們需要確保內容充滿整個頁面，因為這是一個全屏幻燈片效果。

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

<div id="boxgallery" class="boxgallery" data-effect="effect-1"><div class="panel"><img src="img/1.jpg" alt="Image 1"/></div><div class="panel"><img src="img/2.jpg" alt="Image 2"/></div><div class="panel"><img src="img/3.jpg" alt="Image 3"/></div><div class="panel"><img src="img/4.jpg" alt="Image 4"/></div> </div>

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

div id="boxgallery" class="boxgallery" data-effect="effect-1"><div class="panel current"><div class="bg-tile"><div class="bg-img"><img src="img/1.jpg" /></div></div><div class="bg-tile"><div class="bg-img"><img src="img/1.jpg" /></div></div><div class="bg-tile"><div class="bg-img"><img src="img/1.jpg" /></div></div><div class="bg-tile"><div class="bg-img"><img src="img/1.jpg" /></div></div></div><div class="panel"><div class="bg-tile"><div class="bg-img"><img src="img/2.jpg" /></div></div><div class="bg-tile"><div class="bg-img"><img src="img/2.jpg" /></div></div><div class="bg-tile"><div class="bg-img"><img src="img/2.jpg" /></div></div><div class="bg-tile"><div class="bg-img"><img src="img/2.jpg" /></div></div></div><div class="panel"><!-- ... --></div><div class="panel"><!-- ... --></div><nav><span class="prev"><i></i></span><span class="next"><i></i></span></nav> </div>

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

　　我們還需要添加一個導航，這樣我們就可以通過面板進行瀏覽。上面我們還用到了數據屬性，里面設置了動畫的效果。下面，讓我們添加一些樣式到這個效果中。需要注意的是，這里演示的 CSS 將不包含任何瀏覽器的前綴，但在源碼文件是有的。

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

html, body, .container {height: 100%; }

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

.js .boxgallery, .js .boxgallery div {position: absolute; }.js .boxgallery, .js .panel {top: 0;left: 0;width: 100%;height: 100%; }

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

.js .boxgallery, .bg-tile, .bg-img {overflow: hidden; }

　　這個例子有三種效果，下面是用于第一效果的 CSS 動畫效果代碼：

.boxgallery[data-effect="effect-1"] .panel.active .bg-tile, .boxgallery[data-effect="effect-2"] .panel.active .bg-tile {animation: scaleDown 1.1s ease-in-out; }@keyframes scaleDown {from { transform: translate3d(0,0,380px); }to { transform: translate3d(0,0,0); } }

?

源碼下載?? ? ?在線演示

?

您可能感興趣的相關文章

• 太贊了！超炫的頁面切換動畫效果【附源碼下載】
• 創意無限！一組網頁邊欄過渡動畫【附源碼下載】
• 好東西！動感的頁面加載動畫效果【附源碼下載】
• 使用 CSS3 實現3D圖片滑塊效果【附源碼下載】
• 時尚設計！三種奇特網格加載效果【附源碼下載】

?

本文鏈接：如何創建平鋪背景的四格幻燈片效果?via?Codrops

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

本文出處【http://www.cnblogs.com/lhb25/】

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的酷毙了！三种风格的全屏幻灯片效果【附源码下载】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。