從2018“草莓音樂節”的宣傳視頻得到的靈感，海報的主題是錯位拼貼分割重組，對我這種設計渣渣而言，看中的是其平面化，也就是說，用SVG+CSS3動畫完全可以玩轉。因為只涉及一些基礎元素的位移、縮放構成的轉場效果，相對來說比較簡單，但創意很開腦洞。因為宣傳視頻比較長，所以把它分割成了幾個部分，依次來完成。

首先放上一張靜態圖，來分析動效。一共涉及三種動效，位移，旋轉，漸隱漸現。當把元素分析完成后，現在就要在AI中進行相應的分層，便于SVG代碼的解讀。在AI中，對應各個部分，放置到不同的圖層中，每個圖層做好命名，依次為底圖base、向上移動moveUp、向下移動moveDown、中間大圓baceCenter、中間小圓centerCircle、周圍圓點dot。因為涉及Y軸方向的位移動畫，所以在底圖的繪制時，需要移動的部分要超出畫板。

相信很多自學的小伙伴都想學習web前端，可以關注小編后私信【學習】可以免費領取學習地址/案例教程/2018最新的一套學習教程，讓學習有方向。

CSS3部分相對來說比較簡單，旋轉動畫transform:rotate()，位移動畫transform:translateY()，因為小圓點只是裝飾作用，所以只設計了兩種類型的透明度的改變，任意分成了兩組。

@keyframes centerCircle{
0%{transform:rotate(0deg); transform-origin:center center}
100%{transform:rotate(-360deg); transform-origin:center center}
}
 #centerCircle{animation:centerCircle linear 4s infinite ; } /*中心旋轉圓設置*/
@keyframes moveUp{
0% {transform: translateY(0)}
100% {transform: translateY(-70px)}
}
#moveUp {animation:moveUp linear 4s infinite alternate; } /*向上移動*/
@keyframes moveDown{
0% {transform: translateY(0)}
100% {transform: translateY(70px)}
 }
#moveDown {animation:moveDown linear 4s infinite alternate; } /*向下移動*/
@keyframes dot1{
0%{opacity:0}
100%{opacity:1}
}
#dot1{animation:dot1 ease 2s infinite alternate}/*漸隱漸現小圓點樣式1*/
@keyframes dot2{
0%{opacity:0.7}
70%{opacity:0}
100%{opacity:0.3}
}
#dot2{animation:dot2 ease 2s infinite alternate}/*漸隱漸現小圓點樣式2*/

先跑起來看看效果，大塊的色塊，濃郁的色彩，似乎還不錯。

go on。接下來如圖：

三個圓從中心依次出現放大，這是一個基礎的縮放動效transform:scale()。這里就要用到控制SVG描邊屬性縮放文章中提到的描邊屬性不受縮放控制的神句了，三個圓的描邊屬性后面都要加上vector-effect:non-scaling-stroke，由于出現的順序不同，又要疊加其他動畫，為了避免自己搞不清各部分動畫的時間次序（畢竟不是AE，時間軸不直觀），所以繪制了一個簡單的時間軸。

動畫屬性定義中，只要開始的時間依次設置好久可以了，另外關于縮放的倍數，由于從無到有，初始值一定是scale(0)，結束的值和定義的圓的半徑有關，可以多調整幾個值，得到最滿意的效果。

@keyframes purpleCircle{
0% {transform:scale(0); transform-origin:center center}
100% {transform:scale(1.5);transform-origin:center center}
}
#purpleCircle{animation:purpleCircle linear 1.5s 1s both} /*最大圓 1S后開始擴大*/
@keyframes whiteCircle{
0% {transform:scale(0); transform-origin:center center}
100% {transform:scale(2);transform-origin:center center}
}
#whiteCircle{animation:whiteCircle linear 1.5s 1.5s both} /*中間圓 1.5S后開始擴大*/
@keyframes blueCircle{
0% {transform:scale(0); transform-origin:center center}
100% {transform:scale(1);transform-origin:center center}
}
#blueCircle{animation:blueCircle linear 1.5s 2s both} /*最小圓 2S后開始擴大*/

合成后效果如下：

go on……

如上圖所示，當白色圓擴展到整個畫布后，中間出現兩個三角，三角的變形動畫如下：

為了方便定義屬性，我以三角形斷開時的形狀為基準，因為第一步是Y軸向的縮放，X軸不變，所以僅定義transform:scaleY()，而在第二步變形中，X軸向與Y軸向縮放時不同步的，因此要分開寫成transform:scaleX()scaleY()。為了確保第一步統一的變形效果，要先把兩個三角都放在一個組中，給這個組進行變形動畫。

<g id="triangle">
<polygon id="triLeft" points=""/> <!--左側三角-->
<polygon id="triRight" points=""/> <!--右側三角-->
</g>

動畫屬性中需要注意的是transform-origin變形基點的定義。當兩個三角斷開后，基點對應如下：

@keyframes triangle{
0% {transform:scaleY(0);transform-origin:}
100%{transform:scaleY(1);transform-origin:} /*變形的基點為交點坐標*/
} 
#triangle{animation:triangle linear 0.5s 2.5s both} /*兩個三角形Y軸向擴大*/
@keyframes triLeft{
0% {transform:scaleY(1)scaleX(1);transform-origin:} /*變形的基點為左側邊中點坐標*/
100%{transform:scaleY(0.15)scaleX(0.05);transform-origin:}
} 
#triLeft{animation:triLeft linear 0.5s 3s both} /*左側三角形向左水平縮小*/
@keyframes triRight{
0% {transform:scaleY(1)scaleX(1);transform-origin:} /*變形的基點為右側邊中點坐標*/
100%{transform:scaleY(0.6)scaleX(0.5);transform-origin:}
} 
#triRight{animation:triRight linear 0.5s 3s both} /*右側三角形向右水平縮小*/

看下效果，似乎不錯，截止到這一步，第一階段的動畫才算完成，之所以稱作第一階段，是因為這時原底圖可以退出舞臺，全新的下一幕開始了。

這里右側圓形實現這種效果有點復雜，在SVG剪切蒙版屬性clip-path文章中詳細說明了實現過程。 各部分圖形的順序至關重要。

來看下效果

好了，第二部分也正式結束，第三部分相對簡單一些，基本只有透明度的屬性變化。和第一部分底圖的圓點的動效基本相似，無非圖形更復雜一些，就不再贅述，直接放上最終效果吧。

唯一需要說的是左上角類似漸變網格的圓點，使用了運動的漸變蒙版來實現。

首先需要定義一個蒙版的位移動效@keyframes maskXY{
0%{transform:translate(0, 0);}
100%{transform:translate(-70px, -70px); } /*向左上角位移*/
}
#maskXY{animation:maskXY linear 3s 5s both} 

漸變類型的定義和圖形是AI導出時生成的，一般不用修改，只是各種定義比較多，別把自己繞進去就行。

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

通常我們說的 Web 動畫，其實包含了以下三大類：

1、CSS3 動畫

2、javascript 動畫（canvas）

3、html 動畫（SVG）

3 種動畫各有優劣，實際應用中根據情況作出取舍，本文討論的是我認為 SVG 中在實際項目中非常有應用價值 SVG 線條動畫。

SVG 的歷史和優勢（W3C）

在 2003 年一月，SVG 1.1 被確立為 W3C 標準。 參與定義 SVG 的組織有：太陽微系統、Adobe、蘋果公司、IBM 以及柯達。 與其他圖像格式相比，使用 SVG 的優勢在于：

1、SVG 可被非常多的工具讀取和修改（比如記事本）

2、SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。

3、SVG 是可伸縮的

4、SVG 圖像可在任何的分辨率下被高質量地打印

5、SVG 可在圖像質量不下降的情況下被放大

6、SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）

7、SVG 可以與 Java 技術一起運行

8、SVG 是開放的標準

9、SVG 文件是純粹的 XML

10、SVG 的主要競爭者是 Flash。

與 Flash 相比，SVG 最大的優勢是與其他標準（比如 XSL 和 DOM）相兼容。而 Flash 則是未開源的私有技術。

SVG 是什么

可縮放矢量圖形，即SVG，是W3C XML的分枝語言之一，用于標記可縮放的矢量圖形。（摘自MDN）

上面代碼中，先談談 svg 標簽：

• version： 表示 <svg> 的版本，目前只有 1.0，1.1 兩種
• xmlns：http://www.w3.org/2000/svg 固定值
• xmlns:xlink：http://www.w3.org/1999/xlink 固定值
• xml:space：preserve 固定值，上述三個值固定，表示命名空間，當數據單獨存在svg文件內時，這3個值不能省略
• class：就是我們熟悉的 class 類選擇器
• width | height： 定義 svg 畫布的大小
• viewbox： 定義了畫布上可以顯示的區域，當 viewBox 的大小和 svg 不同時，viewBox 在屏幕上的顯示會縮放至 svg 同等大小

有了 svg 標簽，我們就可以愉快的在內部添加 SVG 圖形了

SVG 基本形狀

MDN Web 有基本形狀的文檔，建議去看看。包含矩形、圓形、橢圓、線條、多邊形、折線等等。

好了，有了基本的了解，我們繼續今天的話題，SVG 線條動畫。

SVG 線條動畫

先看看效果圖，然后想想如果是你，該怎么實現這個效果了？

ok，像以前一樣，我們先來解析一下（按步驟實現）：

1、svg畫個按鈕（基礎形狀-矩形）

2、矩形只保留下方底邊

3、實現鼠標：hover事件 + 動畫效果

svg畫個按鈕

<div class="button"> 
 <svg 
 viewBox="0 0 320 60" 
 version="1.1" 
 xmlns="http://www.w3.org/2000/svg" 
 > 
 <rect class="shape" height="60" width="320"></rect> 
 </svg> 
 <div class="hover-text">Web 秀</div> 
</div>

添加樣式

.button { 
 position: absolute; 
 width: 320px; 
 height: 60px; 
 top: 50%; 
 left: 50%; 
 transform: translate(-50%, -50%); 
} 
.hover-text { 
 position: absolute; 
 line-height: 60px; 
 width: 320px; 
 top: 0; 
 color: #1199ff; 
 font-size: 28px; 
 text-align: center; 
 cursor: pointer; 
} 
.shape { 
 fill: transparent; 
 stroke-width: 4px; 
 stroke: #1199ff; 
}

button垂直水平居中、shape透明填充，邊框寬度4px，邊框顏色#1199ff。

也許你會對fill、stroke-width等屬性有點懵，下面看看他們的描述：

• fill：類比 css 中的 background-color，給 svg 圖形填充顏色；
• stroke-width：類比 css 中的 border-width，給 svg 圖形設定邊框寬度；
• stroke：類比 css 中的 border-color，給 svg 圖形設定邊框顏色；
• stroke-linejoin | stroke-linecap：設定線段連接處的樣式；
• stroke-dasharray：值是一組數組，沒數量上限，每個數字交替表示劃線與間隔的寬度；
• stroke-dashoffset：則是劃線與間隔的偏移量

重點講講能夠實現線條動畫的關鍵屬性 stroke-dasharray 。屬性 stroke-dasharray 可控制用來描邊的點劃線的圖案范式。

SVG 矩形只留底邊

這里我們給按鈕添加stroke-dasharray：

.shape { 
 ... 
 stroke-dasharray: 160 520; 
 stroke-dashoffset: -460; 
}

SVG hover動畫

.button:hover .hover-text { 
 transition: 0.5s; 
 color: pink; 
} 
 
.button:hover .shape { 
 -webkit-animation: draw 0.5s linear forwards; 
 animation: draw 0.5s linear forwards; 
} 
 
@keyframes draw { 
 0% { 
 stroke-dasharray: 160 520; 
 stroke-dashoffset: -460; 
 stroke-width: 4px; 
 } 
 100% { 
 stroke-dasharray: 760; 
 stroke-dashoffset: 0; 
 stroke-width: 2px; 
 stroke: pink; 
 } 
}

hover時，改變文字顏色，利用stroke-dasharray和stroke-dashoffset實現動畫效果。

后續文章將會詳述非規則圖形，如何使用 PS + AI 生成 path 路徑，實現 SVG 動畫，敬請期待。

公告

喜歡小編的點擊關注，了解更多知識！

源碼地址和源文件下載請點擊下方“了解更多”