真是好東西！一組動感的頁面載入動畫效果

這個效果的核心是讓一個形狀在頁面視窗中動畫顯示並有展示活動的指示。當新內容被載入時，形狀將以動畫顯示返回顯示的頁面。我們將使用 Snap.svg 動畫庫來實現，因為這個庫讓我們能夠建立複雜的形狀和有趣的變形轉換效果。

立即下載 線上演示

需要注意的是，這裡的示例只是提供一種思路，動態內容載入是模擬的。另外沒有做降級處理，動畫和偽元素可能在某些瀏覽器無法正常工作。

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

我們顯示遮罩的方式是，定義一個 SVG 路徑動畫：

<div id="loader"class="pageload-overlay"data-opening="M 0,0 80,-10 80,60 0,70 0,0"data-closing="M 0,-10 80,-20 80,-10 0,0 0,-10">
<svg xmlns="http://www.w3.org/2000/svg"width="100%"height="100%"viewBox="0 0 80 60"preserveAspectRatio="none">
<path d="M 0,70 80,60 80,80 0,80 0,70"/>
</svg>
</div><!-- /pageload-overlay -->

我們定義的初始路徑在頁面中是看不到的，開始和結果路徑分別定義在 data-opening 和 data-closing 屬性中。正如你所看到的，我們使用的是小型的 viewBox，但我們舒展繪圖視窗的寬度和高度為100%，而不是保持長寬比。如果我們沒有定義一個閉合的路徑，我們將動畫回到初始路徑。

請注意，我們也可以新增多個路徑（用分號隔開），它允許 SVG 繪製你將在第一演示中看到的步驟明智的動畫。 我們設定疊加劃分到一個固定的位置，覆蓋了整個頁面，並通過給 ::before 和 ::after 偽元素新增樣式來實現載入提示效果。

.pageload-overlay {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
visibility:hidden;
}

.pageload-overlay.show{
visibility:visible;
}

.pageload-overlay svg {
position:absolute;
top:0;
left:0;
}

.pageload-overlay svg path {
fill:#fff;
}

我們在這裡使用 visibility，因為使用這些固定的風格定位與指標以及 SVG 的事件可能在移動端有些問題，所以我們通過定位和操縱父 DIV 來代替。 你可能已經注意到，圓形動畫也從一個路徑到另一個路徑變換來實現（當然有其他的實現方式，例如縮放） ，但我們使用以下值來確定圓是響應式（ Rseponsive）的：

width="100%"height="100%"viewBox="0 0 80 60"preserveAspectRatio="xMidYMid slice"

使用 slice 將保持縱橫比，但這樣整個頁面顯示區域都可以被 viewBox 覆蓋。我們的示例建立13種效果，但正如你所看到的，可能性是無止境的。我們真的很希望你能獲得啟發。

立即下載 線上演示