不炫技，SVG/CSS3旋轉動畫屬性就能實現的夢幻效果

所以在做動效時發現， 不會js絕對是短板， 尤其在這種批量的活中， 本來就是repeat的工作， 用SCSS的話， $deg: $deg + (360deg / 36) 和 animation: leaf#{$i} 0.2s ease both 來代替那一堆羅裡吧嗦的動畫定義是不是很爽， 哎， 不說了， 不過， 這個動效確實瓣瓣有些多， 下面我們會簡化， 另外， 相信我， 已經試過了， 別手抽的話， 大概10分鐘也就搞完了。 現在， 如果不出意外， 已經能得到下面這朵綻放的花了

似乎還不錯， 但仍有需要優化的地方， 首先， 花瓣是帶透明度的， 一開始未旋轉時重複在相同區域， 層層疊加導致透明度降低， 看上去不像是旋轉複製的效果， 而是把一大把重疊的花瓣依次展開的效果（腦補一下賭神中一封撲克“唰”的展開的場景）， 如果仔細看看我們的實現過程， 就是如此， 那這裡想要達到每一瓣都是從上一瓣的位置複製出去， 怎麼辦， 改唄。 這裡實現的思路也是有多種， 我是用改透明度的方法。

在進行一番純體力運動後， 完成了如下優化後的效果：

好了，以此為基礎，來試試其他效果。（為了好做，我把花瓣數量減半了）。比如換換旋轉原點 transform-origin 的值，改一下顏色，就得到了下面這種：

上面效果都是單色的，沒有體現設計師小夥伴們那卓越的配色效果對不對？虐心的改造來了，比如每朵花瓣單獨定義顏色（對我這種毫無審美的假設計師而言只能用系統的色板取色），再隨隨便便換換基礎圖形（即

定義的圖形），就得到了下面這種蝴蝶展翅：

身無彩鳳雙飛翼

好啦，剩下的自己玩吧，各種形狀，走起，總之，你在AI裡面能實現的此類效果都可以通過這種動畫方式來實現。

###2.疊加縮放動畫

嫌棄單純的旋轉複製的效果太單調？沒有關係，我們來一個個疊加其他動畫屬性，先疊加個簡單的，縮放動畫。這個也是在AI中常用的功能之一，縮放和旋轉操作後，反復的ctrl+D來複製操作。看下下面這張圖，解析一下

單色縮放旋轉複製

不過是最裡面的圓角矩形先等比例放大後旋轉一個固定角度，後面的依次重複這種變換， 縮放+旋轉→複製 ，那我們來轉成CSS3屬性。

基於上面的基礎，首先把 定義的基礎圖形改一下，旋轉的那裡不用管，現在要增加一個縮放的屬性 scale()

設置。比如在這個例子裡，我縮放是按1.2倍來進行的，以第一個進行變化的圖形為例，CSS屬性定義如下：

這裡比旋轉變形略複雜的在於比例的計算，不像角度那樣可以30度60度90度……直接疊加，縮放比例則是 1.2、1.2*12.、1.2*1.2*12…… 需要稍微計算一下。這樣我們就得到了下面這個旋轉疊加縮放的複製動效：

同樣，改改形狀和變形的原點，可以很輕鬆的做出下面這種

這裡除了填充顏色不同，還稍微改了一下，用了CSS3的混合模式，增加了一個屬性值 mix-blend-mode:lighten ，也就是我們PS或者AI混合模式中的變亮。

transform:scale() 屬性與旋轉不同，是支持兩個值的，比如寫成這種 transform:scale(1,1.3) 就意味著寬度不變，高度放大1.3倍，我改了一個三角形的看一下效果。

只是簡單的示例，效果不是很好，有創意的設計師可以自行發揮，知道可以分開定義就可以啦。

###3.疊加位移動畫

有了上面關於疊加縮放動畫的嘗試，疊加位移動畫就簡單多了。看一下下面這種動效效果，這是一個很討巧的動畫。

位移旋轉複製動畫

之所以說它討巧，是因為仔細分析動效，所有花瓣的位移都是一致的，也就是說我把位移屬性設置到了所有花瓣元素的組合 元素上。這樣的話，我賦給組合一個位移屬性設置 transform:translateX(50px) translateY(50px) ，就可以實現這種效果了。關於旋轉原點的定義，因為每個花瓣都是在一個動態位移的過程中，所以我把旋轉原點定義為 transform-origin:30% 30%

，讓每個花瓣都以自己的固定的一個點為基準。

旋轉原點

關於漸變色的配色，這裡有個小技巧可以參考一下。

漸變色

我們常用的色值，除了RGB和十六進位表示方法，還有一個hsl（色相、飽和度、明度）表示方法。如上圖所示，最深色和最淺色的hsl值獲取到之後，剩下的顏色可以手動去寫。

在考慮用什麼來展現這種旋轉複製的位移動畫時，突然想到了一個高逼格的圖形，鸚鵡螺的黃金螺旋！來看下下麵這張圖。

黃金螺旋

被覆用的是一個1/4扇形，旋轉角度為-90度（90度為順時針旋轉），放大的比例有規律可尋，即斐波那契數列。位移值最簡單的計算方法是和上一個相比較，比如圖形7和圖形6相比，垂直方向沒有位移，水準方向正向位移為圖形5的寬（高）度。

推薦下我的前端群：524262608，不管你是小白還是大牛，小編我都歡迎，不定期分享乾貨，包括我自己整理的一份前端資料和零基礎入門教程，歡迎初學者和在進階中的小夥伴。

因為這裡 transform 設置了 scale 、 rotate 、 translate 三種屬性，在書寫順序的時候，一定要把 rotate 放到 scale 的後面，防止因為旋轉導致坐標系變化，位移值不好推算。

黃金螺旋

這樣，我們就得到了一個完美黃金螺旋動效。這裡我唯一不能理解的是如果不是填充而是描邊屬性，描邊值會等比例放大。

對於此類旋轉複製動畫，最重要的是 元素定義重複使用的圖形，然後 元素去引用。重複幾次就引用幾次。

好了，以此為基礎，來試試其他效果。（為了好做，我把花瓣數量減半了）。比如換換旋轉原點 transform-origin 的值，改一下顏色，就得到了下面這種：

上面效果都是單色的，沒有體現設計師小夥伴們那卓越的配色效果對不對？虐心的改造來了，比如每朵花瓣單獨定義顏色（對我這種毫無審美的假設計師而言只能用系統的色板取色），再隨隨便便換換基礎圖形（即

定義的圖形），就得到了下面這種蝴蝶展翅：

身無彩鳳雙飛翼

好啦，剩下的自己玩吧，各種形狀，走起，總之，你在AI裡面能實現的此類效果都可以通過這種動畫方式來實現。

###2.疊加縮放動畫

嫌棄單純的旋轉複製的效果太單調？沒有關係，我們來一個個疊加其他動畫屬性，先疊加個簡單的，縮放動畫。這個也是在AI中常用的功能之一，縮放和旋轉操作後，反復的ctrl+D來複製操作。看下下面這張圖，解析一下

單色縮放旋轉複製

不過是最裡面的圓角矩形先等比例放大後旋轉一個固定角度，後面的依次重複這種變換， 縮放+旋轉→複製 ，那我們來轉成CSS3屬性。

基於上面的基礎，首先把 定義的基礎圖形改一下，旋轉的那裡不用管，現在要增加一個縮放的屬性 scale()

設置。比如在這個例子裡，我縮放是按1.2倍來進行的，以第一個進行變化的圖形為例，CSS屬性定義如下：

這裡比旋轉變形略複雜的在於比例的計算，不像角度那樣可以30度60度90度……直接疊加，縮放比例則是 1.2、1.2*12.、1.2*1.2*12…… 需要稍微計算一下。這樣我們就得到了下面這個旋轉疊加縮放的複製動效：

同樣，改改形狀和變形的原點，可以很輕鬆的做出下面這種

這裡除了填充顏色不同，還稍微改了一下，用了CSS3的混合模式，增加了一個屬性值 mix-blend-mode:lighten ，也就是我們PS或者AI混合模式中的變亮。

transform:scale() 屬性與旋轉不同，是支持兩個值的，比如寫成這種 transform:scale(1,1.3) 就意味著寬度不變，高度放大1.3倍，我改了一個三角形的看一下效果。

只是簡單的示例，效果不是很好，有創意的設計師可以自行發揮，知道可以分開定義就可以啦。

###3.疊加位移動畫

有了上面關於疊加縮放動畫的嘗試，疊加位移動畫就簡單多了。看一下下面這種動效效果，這是一個很討巧的動畫。

位移旋轉複製動畫

之所以說它討巧，是因為仔細分析動效，所有花瓣的位移都是一致的，也就是說我把位移屬性設置到了所有花瓣元素的組合 元素上。這樣的話，我賦給組合一個位移屬性設置 transform:translateX(50px) translateY(50px) ，就可以實現這種效果了。關於旋轉原點的定義，因為每個花瓣都是在一個動態位移的過程中，所以我把旋轉原點定義為 transform-origin:30% 30%

，讓每個花瓣都以自己的固定的一個點為基準。

旋轉原點

關於漸變色的配色，這裡有個小技巧可以參考一下。

漸變色

我們常用的色值，除了RGB和十六進位表示方法，還有一個hsl（色相、飽和度、明度）表示方法。如上圖所示，最深色和最淺色的hsl值獲取到之後，剩下的顏色可以手動去寫。

在考慮用什麼來展現這種旋轉複製的位移動畫時，突然想到了一個高逼格的圖形，鸚鵡螺的黃金螺旋！來看下下麵這張圖。

黃金螺旋

被覆用的是一個1/4扇形，旋轉角度為-90度（90度為順時針旋轉），放大的比例有規律可尋，即斐波那契數列。位移值最簡單的計算方法是和上一個相比較，比如圖形7和圖形6相比，垂直方向沒有位移，水準方向正向位移為圖形5的寬（高）度。

推薦下我的前端群：524262608，不管你是小白還是大牛，小編我都歡迎，不定期分享乾貨，包括我自己整理的一份前端資料和零基礎入門教程，歡迎初學者和在進階中的小夥伴。

因為這裡 transform 設置了 scale 、 rotate 、 translate 三種屬性，在書寫順序的時候，一定要把 rotate 放到 scale 的後面，防止因為旋轉導致坐標系變化，位移值不好推算。

黃金螺旋

這樣，我們就得到了一個完美黃金螺旋動效。這裡我唯一不能理解的是如果不是填充而是描邊屬性，描邊值會等比例放大。

對於此類旋轉複製動畫，最重要的是 元素定義重複使用的圖形，然後 元素去引用。重複幾次就引用幾次。