CSS3的動畫相關(guān)的基礎(chǔ)的屬性基本都涉獵過了，個人認(rèn)為，其中最復(fù)雜的是d:path()路徑變形動畫，超過3D，而位移、軌跡、旋轉(zhuǎn)、縮放、斜切什么的，相對簡單一些，但作為非動畫設(shè)計師而言，靈活的掌握這些基本的動畫加以無窮無盡的變換，就已經(jīng)能做出很多華麗麗的效果了，這篇呢，源于做一個練習(xí)時，AI的連續(xù)旋轉(zhuǎn)復(fù)制功能，試著做了幾個動效，簡單、省時、高效，最主要的是用到CSS3的transform:rotate()旋轉(zhuǎn)屬性，輔以位移和縮放。

1.最基本的旋轉(zhuǎn)動畫

下面這張效果圖，粗通AI的設(shè)計師小伙伴們一定都不會陌生，在AI里面就是ctrl+D連續(xù)復(fù)制的體力活。

如果把連續(xù)旋轉(zhuǎn)復(fù)制轉(zhuǎn)成CSS3語言，也是極簡單的。來分析一下上面的圖形，我做的時候每次旋轉(zhuǎn)的角度為10度，就意味著有36朵花瓣，那對應(yīng)SVG里應(yīng)該有36個路徑<path>，如果是AI直接導(dǎo)出的SVG看一下代碼，也是密密麻麻的羅列，因為都是相同的形狀，自然有簡單的方法來實現(xiàn)，只需定義一個被重復(fù)使用的圖形，有兩種方法<defs>元素和<symbol>元素來定義，<use>元素來引用，那因為<symbol>元素使用范圍更寬泛一些，所以我們需要的工作就簡化成，在AI里做一片花瓣的基礎(chǔ)圖形，然后導(dǎo)出路徑后，定義如下

<symbol id="single"><path d=""/> <!--此處為AI導(dǎo)出的單片花瓣的路徑--></symbol> 復(fù)制代碼

先來第二片花瓣（也就是第一個旋轉(zhuǎn)的花瓣），CSS部分定義如下：

@keyframes leaf1{ 0%{transform:rotate(0deg); transform-origin:400px 300px} 100%{transform:rotate(10deg); transform-origin:400px 300px} } #petal1{animation:leaf1 ease 0.1s both;} 復(fù)制代碼

DOM部分，只需要用<use>元素引用定義好的花瓣并且賦給它旋轉(zhuǎn)的動效就可以了。

好了，剩下的還是體力活，需要把<use>元素部分復(fù)制34次，然后CSS動畫部分復(fù)制34次，當(dāng)然了，動畫那里，需要遞增一下時間和旋轉(zhuǎn)角度，比如接下來那片花瓣<use id="leaf2" xlink:href="#single"/>對應(yīng)如下動畫屬性：

@keyframes leaf2{0%{transform:rotate(0deg); transform-origin:400px 300px}100%{transform:rotate(20deg); transform-origin:400px 300px} /*角度增加10度*/}#leaf2{animation:leaf2 ease 0.2s both;} /*動畫時間增加0.2s*/ 復(fù)制代碼

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

似乎還不錯，但仍有需要優(yōu)化的地方，首先，花瓣是帶透明度的，一開始未旋轉(zhuǎn)時重復(fù)在相同區(qū)域，層層疊加導(dǎo)致透明度降低，看上去不像是旋轉(zhuǎn)復(fù)制的效果，而是把一大把重疊的花瓣依次展開的效果（腦補一下賭神中一封撲克“唰”的展開的場景），如果仔細看看我們的實現(xiàn)過程，就是如此，那這里想要達到每一瓣都是從上一瓣的位置復(fù)制出去，怎么辦，改唄。這里實現(xiàn)的思路也是有多種，我是用改透明度的方法。放上前三片旋轉(zhuǎn)花瓣的CSS3定義和上面的對比一下（不是要羅代碼，只是太少看不出規(guī)律）：

@keyframes leaf1{0%{opacity:0; transform:rotate(0deg); transform-origin:400px 300px} /*增加初始透明度的定義0，即初始不可見*/100%{transform:rotate(10deg); transform-origin:400px 300px}}#leaf1{animation:leaf1 ease 0.1s both ; }@keyframes leaf2{0%{opacity:0; transform:rotate(10deg); transform-origin:400px 300px} /*增加初始位置定義，即上一朵花瓣的位置*/100%{transform:rotate(20deg); transform-origin:400px 300px} }#leaf2{animation:leaf2 ease 0.1s both 0.1s; } /*動畫時間統(tǒng)一為0.1s并增加動畫延遲時間的設(shè)置0.1s*/@keyframes leaf3{ 0%{opacity:0; transform:rotate(20deg); transform-origin:400px 300px} 100%{transform:rotate(30deg); transform-origin:400px 300px} } #leaf3{animation:leaf3 ease 0.1s both 0.2s;} /*動畫延遲時間0.2s，依次類推*/ 復(fù)制代碼

在進行一番純體力運動后，完成了如下優(yōu)化后的效果：

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

上面效果都是單色的，沒有體現(xiàn)設(shè)計師小伙伴們那卓越的配色效果對不對？虐心的改造來了，比如每朵花瓣單獨定義顏色（對我這種毫無審美的假設(shè)計師而言只能用系統(tǒng)的色板取色），再隨隨便便換換基礎(chǔ)圖形（即<symbol>定義的圖形），就得到了下面這種蝴蝶展翅：

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

2.疊加縮放動畫

嫌棄單純的旋轉(zhuǎn)復(fù)制的效果太單調(diào)？沒有關(guān)系，我們來一個個疊加其他動畫屬性，先疊加個簡單的，縮放動畫。這個也是在AI中常用的功能之一，縮放和旋轉(zhuǎn)操作后，反復(fù)的ctrl+D來復(fù)制操作。看下下面這張圖，解析一下

不過是最里面的圓角矩形先等比例放大后旋轉(zhuǎn)一個固定角度，后面的依次重復(fù)這種變換，縮放+旋轉(zhuǎn)→復(fù)制，那我們來轉(zhuǎn)成CSS3屬性。 基于上面的基礎(chǔ)，首先把<symbol>定義的基礎(chǔ)圖形改一下，旋轉(zhuǎn)的那里不用管，現(xiàn)在要增加一個縮放的屬性scale()設(shè)置。比如在這個例子里，我縮放是按1.2倍來進行的，以第一個進行變化的圖形為例，CSS屬性定義如下：

@keyframes leaf1{ 0%{opacity:0; transform:rotate(0deg); transform-origin:400px 300px} 100%{transform:rotate(30deg) scale(1.2); transform-origin:400px 300px} /*增加縮放的比例設(shè)置*/ } 復(fù)制代碼

這里比旋轉(zhuǎn)變形略復(fù)雜的在于比例的計算，不像角度那樣可以30度60度90度……直接疊加，縮放比例則是1.2、1.2*12.、1.2*1.2*12……需要稍微計算一下。這樣我們就得到了下面這個旋轉(zhuǎn)疊加縮放的復(fù)制動效：

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

這里除了填充顏色不同，還稍微改了一下，用了CSS3的混合模式，增加了一個屬性值mix-blend-mode:lighten，也就是我們PS或者AI混合模式中的變亮。 transform:scale()屬性與旋轉(zhuǎn)不同，是支持兩個值的，比如寫成這種transform:scale(1,1.3)就意味著寬度不變，高度放大1.3倍，我改了一個三角形的看一下效果。

只是簡單的示例，效果不是很好，有創(chuàng)意的設(shè)計師可以自行發(fā)揮，知道可以分開定義就可以啦。

3.疊加位移動畫

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

之所以說它討巧，是因為仔細分析動效，所有花瓣的位移都是一致的，也就是說我把位移屬性設(shè)置到了所有花瓣元素的組合<g>元素上。這樣的話，我賦給組合一個位移屬性設(shè)置transform:translateX(50px) translateY(50px)，就可以實現(xiàn)這種效果了。關(guān)于旋轉(zhuǎn)原點的定義，因為每個花瓣都是在一個動態(tài)位移的過程中，所以我把旋轉(zhuǎn)原點定義為transform-origin:30% 30%，讓每個花瓣都以自己的固定的一個點為基準(zhǔn)。

關(guān)于漸變色的配色，這里有個小技巧可以參考一下。

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

在考慮用什么來展現(xiàn)這種旋轉(zhuǎn)復(fù)制的位移動畫時，突然想到了一個高逼格的圖形，鸚鵡螺的黃金螺旋！來看下下面這張圖。

被復(fù)用的是一個1/4扇形，旋轉(zhuǎn)角度為-90度（90度為順時針旋轉(zhuǎn)），放大的比例有規(guī)律可尋，即斐波那契數(shù)列。位移值最簡單的計算方法是和上一個相比較，比如圖形7和圖形6相比，垂直方向沒有位移，水平方向正向位移為圖形5的寬（高）度。 **因為這里transform設(shè)置了scale、rotate、translate三種屬性，在書寫順序的時候，一定要把rotate放到scale**的后面，防止因為旋轉(zhuǎn)導(dǎo)致坐標(biāo)系變化，位移值不好推算。

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

對于此類旋轉(zhuǎn)復(fù)制動畫，最重要的是<symbol>元素定義重復(fù)使用的圖形，然后<use>元素去引用。重復(fù)幾次就引用幾次。

總結(jié)

以上是生活随笔為你收集整理的不炫技，SVG+CSS3 旋转动画属性就能实现的梦幻效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。