|
|
|
|
|
|
9款用SVG蒙版制作的圖片轉場/過渡動畫（含教程）
作者:admin 時間:2024-4-22 11:31:54 瀏覽:本文給大家介紹10款用SVG蒙版制作的圖片轉場/過渡動畫，并分析如何實現它們。
示例分析
首先看簡單示例。
它的結構如何？
SVG：
<mask id="m-lines">
<line x1="0" y1="0" x2="100%" y2="100%" class="elem-mask"/>
<line x1="0" y1="100%" x2="100%" y2="0%" class="elem-mask"/>
</mask>
里面有兩條線。我沒有使用path，因為它不能給出百分比坐標。
線條的 CSS：
$mask-time: 7s;
.elem-mask {
stroke: #FFF;
stroke-width: 0;
animation: stroke-width $mask-time infinite;
}
@keyframes stroke-width {
50% {
stroke-width: 300;
}
}
在初始狀態下，線條不可見，因為stroke-width: 0。為了使筆畫在動畫過程中充當蒙版的可見區域，將它們設置為白色stroke: #FFF。還設置了將幀厚度增加到 300 的動畫。
如果你把mask拉出來，它會是這樣的：
僅顯示白色區域下方的內容。線條按筆劃放大并顯示其下方的內容。
使用mask="url(#m-line)"屬性通過 CSS 將遮罩應用于形狀：mask: url(#m-line);
多種蒙版動畫效果
了解這種面罩的工作原理，可以做出許多其他選擇。
從中心簡單展開：
以一個角度展開：
使用圖案制作蒙版
使用圖案可以制作帶圖案的蒙版。
單元格：
菱形：
圖案可以用最少的形狀獲得有趣的結果，但如果在蒙版內定義多個形狀并分別為它們設置動畫，則可以使其變得更加有趣。
在這種情況下，mask中的路徑不一定必須是直線：
一般來說，這些不一定是線條：
注意問題
首先，IE 不支持 SVG 元素動畫。
其次，是性能問題。據我所知，SVG 元素動畫目前尚未被瀏覽器優化，因此謹慎地使用動畫 SVG 是有意義的。
不必出于實際目的使用此類蒙版，但我認為在它們的幫助下，將有可能創建壯觀的滑塊和照片庫。
總結
本文介紹了9款用SVG蒙版制作的圖片轉場/過渡動畫，并進行了簡單的制作說明，希望你喜歡。
相關文章
相關文章
- SVG實現的網頁氣泡動畫效果
- 教你用illustrator把PNG圖片轉換為SVG含path路徑文件
- [教程]如何用illustrator創建SVG圖像并在網頁上使用
- SVG代碼優化工具，優化后體積減少60%
- CSS+JS實現的下載按鈕動畫（滾動數字+進度條動畫）
- CSS3實現的無數小圓無限loading的加載動畫（3D效果）
- CSS加載動畫(loading animation)-扭動的圓環
- CSS實現的下載進程動畫【演示/源碼】
- 純CSS實現的跳動的紅心【演示/源碼下載】
- 純CSS創建圓形旋轉圖像滑塊(輪播)【演示/代碼下載】
- 純CSS+SVG創建有趣的動畫復選框checkbox
- 一個具有鼠標懸停動畫效果的SVG復選框checkbox
- 8款SVG創建的動畫checkbox多選框和radio單選框
- SVG圖標對比圖標字體的5大優點
- SVG圖標：icon-home【代碼】
x
