如果您曾經(jīng)訪問過 Nicolas Zezuka 和 Active Theory 的出色的設(shè)計(jì)網(wǎng)站,你可能已經(jīng)注意到在顯示新內(nèi)容之前動(dòng)感的頁面加載動(dòng)畫了。這種風(fēng)格的動(dòng)畫效果最近非常流行,因此這篇文章想給你帶來一些啟示。
這個(gè)效果的核心是讓一個(gè)形狀在頁面窗口中動(dòng)畫顯示并有展示活動(dòng)的指示。當(dāng)新內(nèi)容被加載時(shí),形狀將以動(dòng)畫顯示返回顯示的頁面。我們將使用 Snap.svg 動(dòng)畫庫來實(shí)現(xiàn),因?yàn)檫@個(gè)庫讓我們能夠創(chuàng)建復(fù)雜的形狀和有趣的變形轉(zhuǎn)換效果。
在線演示
需要注意的是,這里的示例只是提供一種思路,動(dòng)態(tài)內(nèi)容加載是模擬的。另外沒有做降級(jí)處理,動(dòng)畫和偽元素可能在某些瀏覽器無法正常工作。
溫馨提示:為保證最佳的效果,請(qǐng)?jiān)?IE10+、Chrome、Firefox 和 Safari 等現(xiàn)代瀏覽器中瀏覽。
我們顯示遮罩的方式是,定義一個(gè) SVG 路徑動(dòng)畫:
我們定義的初始路徑在頁面中是看不到的,開始和結(jié)果路徑分別定義在 data-opening 和 data-closing 屬性中。正如你所看到的,我們使用的是小型的 viewBox,但我們舒展繪圖窗口的寬度和高度為100%,而不是保持長寬比。如果我們沒有定義一個(gè)閉合的路徑,我們將動(dòng)畫回到初始路徑。
請(qǐng)注意,我們也可以添加多個(gè)路徑(用分號(hào)隔開),它允許 SVG 繪制你將在第一演示中看到的步驟明智的動(dòng)畫。 我們?cè)O(shè)置疊加劃分到一個(gè)固定的位置,覆蓋了整個(gè)頁面,并通過給 ::before 和 ::after 偽元素添加樣式來實(shí)現(xiàn)加載提示效果。
我們?cè)谶@里使用 visibility,因?yàn)槭褂眠@些固定的風(fēng)格定位與指針以及 SVG 的事件可能在移動(dòng)端有些問題,所以我們通過定位和操縱父 DIV 來代替。 你可能已經(jīng)注意到,圓形動(dòng)畫也從一個(gè)路徑到另一個(gè)路徑變換來實(shí)現(xiàn)(當(dāng)然有其他的實(shí)現(xiàn)方式,例如縮放) ,但我們使用以下值來確定圓是響應(yīng)式( Rseponsive)的:
新聞熱點(diǎn)
疑難解答
圖片精選