如果您曾經訪問過 nicolas zezuka 和 active theory 的出色的設計**，你可能已經注意到在顯示新內容之前動感的頁面載入動畫了。這種風格的動畫效果最近非常流行，因此這篇文章想給你帶來一些啟示。
這個效果的核心是讓乙個形狀在頁面視窗中動畫顯示並有展示活動的指示。當新內容被載入時，形狀將以動畫顯示返回顯示的頁面。我們將使用 snap.svg 動畫庫來實現，因為這個庫讓我們能夠建立複雜的形狀和有趣的變形轉換效果。
**演示
需要注意的是，這裡的示例只是提供一種思路，動態內容載入是模擬的。另外沒有做降級處理，動畫和偽元素可能在某些瀏覽器無法正常工作。
溫馨提示：為保證最佳的效果，請在 ie10+、chrome、firefox 和 safari 等現代瀏覽器中瀏覽。
我們顯示遮罩的方式是，定義乙個 svg 路徑動畫：
我們定義的初始路徑在頁面中是看不到的，開始和結果路徑分別定義在 data-opening 和 data-closing 屬性中。正如你所看到的，我們使用的是小型的 viewbox，但我們舒展繪圖視窗的寬度和高度為100%，而不是保持長寬比。如果我們沒有定義乙個閉合的路徑，我們將動畫回程式設計客棧到初始路徑。
請注意，我們也可以新增多個路徑（用分號隔開），它允許 svg 繪製你將在第一演示中看到的步驟明智的動畫。 我們設定疊加劃分到乙個固定的位置，覆蓋了整個頁面，並通過給 ::before 和 ::after 偽元素新增樣式來實現載入提示效果。
j**ascript code複製內容到剪貼簿
我們在這裡使用 visibility，因為使用這些固定的風格定位與指標以及 svg 的事件可能在移動端有些問題，所以我們通過定位和操縱父 div 來代替。 你可能已經注意到，圓形動畫也從乙個路徑到另乙個路徑變換來實現（當然有其他的實現方式，例如縮放） ，但我們使用以下值來確定圓是響應式（ rseponsive）的：
xml/html code複製內容到剪貼簿
使用 slice 將保持縱橫比，但這樣整個頁面顯示區域都可以被 viewbox 覆蓋。我們的示例建立13種效果，但正如你所看到的，可能性是無止境的。我們真的很希望你能獲得啟發。
本文標題: 乙個全屏的載入動畫效果實現
本文位址: /web/css/83480.html
簡單彩虹動畫的效果實現
簡單彩虹動畫的效果實現 我們先看下最後的效果圖 1 首先我們使用uibezierpath類畫乙個圓弧，使用方法 instancetype bezierpathwitharccenter cgpoint center radius cgfloat radius startangle cgfloat s...
vue實現乙個表示實時，載入中的動畫效果
前言 用css實現的乙個表示實時效果的動畫，效果圖展示 實現 用的ivew的card 1.template 2.data裡面定義資料 alldevices 3.css樣式 很重要 line scale pulse out rapid.success div line scale pulse out ...
CAShaplayer實現乙個載入動畫
思路 方法 建立乙個圖層，圖層要求圓形，可傳引數顏色 大小 方法 給圖層設定位置和整個載入動畫的大小 之後給其新增動畫，並且注意動畫的begintime要有間距 建立layer func createlayerwith size cgsize,color uicolor calayer let la...