用SVG繪制矩形、圓形和橢圓形。

SVG有一些預(yù)定義的形狀元素，可以供開發(fā)者使用。這些元素分別是矩形、圓形 circle 、橢圓 ellipse、線條 line、多線條 polyline、多邊形 polygon、路徑 path 。

我們先來學(xué)習(xí)矩形的繪制。

繪制矩形使用 rect 標(biāo)簽，它是 rectangle 的縮寫，就是矩形的意思。它是一個單標(biāo)簽，基本語法為：尖角號 rect，斜線尖角號。

注意，任何一個 HTML 單標(biāo)簽，都可以在第二個尖角號前寫一個斜線，表示標(biāo)簽閉合了，也就是說，用閉合標(biāo)簽來表示單標(biāo)簽，其實這樣寫更加嚴(yán)謹(jǐn)。

它有幾個重要的屬性：

width，定義矩形的寬度，值是一個數(shù)字。

height，定義矩形的高度，值也是一個數(shù)字。

fill [f?l]，定義矩形的填充顏色，值可以是任意合法的顏色值，比如顏色名稱，rgb顏色值，十六進制顏色值等。

stroke-width [stro?k w?dθ] ，筆畫寬度，定義了矩形的邊框?qū)挾龋凳且粋€數(shù)字。

stroke [stro?k] ，描邊，定義矩形邊框的顏色。

我們來舉個例子。

打開編輯器，創(chuàng)建一個 rect_circle_ellipse.html 文件，補全基礎(chǔ)代碼，在 body 里添加一個 svg 標(biāo)簽，定義屬性 width 等于 400，height 等于 110。

在svg里添加 rect 標(biāo)簽，定義屬性 width 等于 300，height 等于 100，fill 顏色填充值為 blue，藍(lán)色，stroke-width 筆畫寬度屬性值為 3， stroke 描邊屬性值為 black，黑色。保存文件。

在瀏覽器中預(yù)覽，一個矩形就繪制好了。

再來學(xué)習(xí)幾個矩形的屬性：

width，定義矩形的寬度，值是一個數(shù)字。

x，定義矩形的左邊位置，值是一個數(shù)字。

y，定義矩形的頂部位置，值是一個數(shù)字。

fill-opacity，定義填充顏色的不透明度，合法值的范圍是0 到 1。

stroke-opacity，定義描邊顏色的不透明度，合法值的范圍是0 到 1。

回到編輯器，在上個 svg 結(jié)尾處添加一個 br 標(biāo)簽。

回車換行。添加一個新的 svg 標(biāo)簽，屬性 width 等于 400，height 等于 180。

在 svg 里面添加一個 rect 標(biāo)簽，屬性 x 等于 50，y 等于 20，width 等于 150，height 等于 150，fill 等于 blue，stroke 等于 tomato，stroke-width 等于 5，fill-opacity 等于 0.1，stroke-opacity 等于 0.9。保存。

回到瀏覽器，刷新，一個邊長為150，背景色為藍(lán)色，描邊為番茄色，并帶有一定透明度的矩形就繪制好了。

仔細(xì)觀察，背景的透明度高，邊框的透明度低，它們的透明度值分別為0.1 和 0.9。這說明：透明度的值越小，透明度越高。如果值為 0，就完全透明了。

我們也可以給 rect 定義一個 opacity 屬性，用來設(shè)置整個元素的不透明度值，合法值的范圍也是 0 到 1。

回到編輯器，我們?nèi)サ暨@個矩形的 fill-opacity 和 stroke-opacity 屬性，定義一個opacity 屬性，值為 0.5。保存。

回到瀏覽器，刷新，整個矩形透明了0.5，也就是描邊和背景都透明了50%。

最后，我們來繪制一個圓角矩形。

圓角矩形通過給 rect 定義 rx，ry 兩個屬性來實現(xiàn)。

rx，定義圓角x軸方向的半徑長度，值是一個數(shù)字。

ry，定義圓角y軸方向的半徑長度，值是一個數(shù)字。

如果兩個值相等，就是一個圓形的角，兩個值不相等，就是一個橢圓形的角。

回到編輯器，在上個svg結(jié)尾處添加一個 br 標(biāo)簽。

回車換行。添加一個新的 svg 標(biāo)簽，屬性 width 等于 400，height 等于 180。

在 svg 里面添加一個 rect 標(biāo)簽，屬性 x 等于 50，y 等于 20，width 等于 150，height 等于 150，fill 等于 red，stroke 等于 black，stroke-width 等于 5，opacity 等于 0.5。

最后給rect 添加 rx 等于 20，ry 等于 20。保存。

回到瀏覽器，刷新，一個圓角矩形做好了。

返回編輯器，如果將 ry 改為 30。保存。

回到瀏覽器，刷新，矩形的四個角就變成橢圓形了。

接下來，我們學(xué)習(xí)繪制圓形。

繪制圓形使用 circle 標(biāo)簽，circle 就是圓的意思。它是一個單標(biāo)簽，基本語法為：尖角號 circle，斜線尖角號。

它有三個重要的屬性：

cx 和 cy 屬性，定義圓心的 x 和 y 坐標(biāo)。如果省略了cx和cy，圓的中心會被設(shè)置為(0,0)。

r 屬性，定義圓的半徑。

和繪制矩形一樣，通過定義 stroke、stroke-width、fill 屬性來設(shè)置邊框顏色、邊框?qū)挾群捅尘吧畛涞鹊取?/span>

提示一下， stroke、stroke-width、fill 這三個屬性，常見的圖形繪制都可以使用它們。

回到編輯器，在上個svg結(jié)尾處添加一個 br 標(biāo)簽。回車換行。

添加一個新的 svg 標(biāo)簽，屬性 width 等于 100，height 等于 100。

在 svg 里面添加一個 circle 標(biāo)簽，屬性 cx 等于 50，cy 等于 50，r 等于 40，stroke 等于 black，stroke-width 等于 3，fill 等于 red。保存。

回到瀏覽器，刷新，一個圓形就繪制好了。

最后，我們學(xué)習(xí)繪制橢圓形。

繪制橢圓形使用 ellipse 標(biāo)簽，ellipse 就是橢圓的意思。它是一個單標(biāo)簽，基本語法為：尖角號 ellipse，斜線尖角號。

橢圓與圓密切相關(guān)。不同的是，橢圓的 x 和 y 半徑是不同的，而圓的 x 和 y 半徑是相等的。

ellipse 有四個重要的屬性：

cx 屬性，定義橢圓中心的 x 坐標(biāo)。

cy 屬性，定義橢圓中心的 y 坐標(biāo)。

rx 屬性，定義水平半徑。

ry 屬性，定義垂直半徑。

回到編輯器，在上個svg結(jié)尾處添加一個 br 標(biāo)簽。回車換行。

添加一個新的 svg 標(biāo)簽，屬性 width 等于 140，height 等于 500。

在 svg 里面添加一個 ellipse 標(biāo)簽，屬性 cx 等于 200，cy 等于 80，rx 等于 100，ry 等于 50，fill 等于yellow，stroke 等于 purple，stroke-width 等于 2。保存。

回到瀏覽器，刷新，一個橢圓形就繪制好了。

返回編輯器，我們繪制三個堆疊的橢圓。在上個svg結(jié)尾處添加一個 br 標(biāo)簽。回車換行。

添加一個新的 svg 標(biāo)簽，屬性 width 等于 150，height 等于 500。

在 svg 里面添加一個 ellipse 標(biāo)簽，屬性 cx 等于 240，cy 等于 100，rx 等于 220，ry 等于 30，fill 等于purple。

再添加一個 ellipse 標(biāo)簽，屬性 cx 等于 220，cy 等于 70，rx 等于 190，ry 等于 20，fill 等于lime。

再添加一個 ellipse 標(biāo)簽，屬性 cx 等于 210，cy 等于 45，rx 等于 170，ry 等于 50，fill 等于yellow。保存。

回到瀏覽器，刷新，三個逐漸縮小的堆疊橢圓就做好了。

仔細(xì)觀察發(fā)現(xiàn)，三個橢圓的堆疊順序并不是html的書寫順序。這是因為他們的位置和大小是由 cx, cy, rx, ry 來決定的，不是由 html 書寫順序來決定的。根據(jù)這個特點，我們可以將多個橢圓組合起來。

返回編輯器，在上個svg結(jié)尾處添加一個 br 標(biāo)簽。回車換行。

添加一個新的 svg 標(biāo)簽，屬性 width 等于 100，height 等于 500。

在 svg 里面添加一個 ellipse 標(biāo)簽，屬性 cx 等于 240，cy 等于 50，rx 等于 220，ry 等于 30，fill 等于 yellow。

再添加一個 ellipse 標(biāo)簽，屬性 cx 等于 220，cy 等于 50，rx 等于 190，ry 等于 20，fill 等于white。保存。

回到瀏覽器，刷新，視覺上看，一個空心的橢圓就繪制好了。

文章配套視頻鏈接「鏈接」

明：SVG 雖然也是標(biāo)簽，但它不是 HTML5，標(biāo)題加了 HTML5 只是為了與 canvas 放到一起。

一、為什么要學(xué) SVG ?

SVG 意為可縮放矢量圖形（Scalable Vector Graphics），使用 XML 格式定義矢量圖形。其他的圖像格式都是基于像素的，但是 SVG 沒有單位的概念，它的20只是表示1的20倍，所以 SVG 繪制的圖形放大或縮小都不會失真。

與其他圖像比較，SVG 的優(yōu)勢有以下幾點：

1. SVG 可以被多個工具讀取和修改。
2. SVG 與其他格式圖片相比，尺寸更小，可壓縮性強。
3. SVG 可任意伸縮。
4. SVG 圖像可以隨意地高質(zhì)量打印。
5. SVG 圖像可以添加文本和事件，還可搜索，適合做地圖。
6. SVG 是純粹的 XML，不是 HTML5。
7. SVG是W3C標(biāo)準(zhǔn)

二、SVG 形狀元素

2.1、svg 標(biāo)簽

SVG 的代碼都放到 svg 標(biāo)簽?zāi)兀琒VG 中的標(biāo)簽都是閉合標(biāo)簽，與html中標(biāo)簽用法一致。svg的屬性有：

• 有width和height，指定了svg的大小。

eg：畫一條直線，完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body style="height:600px;">
 <svg width="300" height="300">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>    
 </svg> 
</body>
</html>

上述 svg 設(shè)置的寬高沒有帶單位，此時默認(rèn)是像素值，如果需要添加單位時，除了絕對單位，也可以設(shè)置相對單位。

• viewBox 屬性

使用語法：<svg viewBox=" x1,y1,width,height "></svg>

四個參數(shù)分別是左上角的橫縱坐標(biāo)、視口的寬高。表示只看SVG的某一部分，由上述四個參數(shù)決定。

使用 viewBox 之后，相當(dāng)于svg整體大小不變，只能看到 viewBox 設(shè)置部分，視覺上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代碼可以直接嵌入到 html 頁面中，也可以通過 html 的embed、object、iframe嵌入到html中。嵌入的時候嵌入的是 SVG 文件，SVG 文件必須使用 .svg 后綴。分別介紹各種方法如何使用？

2.2.1、embed 嵌入：

使用語法：<embed src="line.svg" type="image/svg+xml"></embed>

src是SVG文件路徑，type 表示 embed 引入文件類型。

優(yōu)點：所有瀏覽器都支持，并允許使用腳本。

缺點：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.2、object 嵌入：

使用語法：<object data="line.svg" type="image/svg+xml"></object>

data 是 SVG 文件路徑，type 表示 object 引入文件類型。

優(yōu)點：所有瀏覽器都支持，支持 html、html4 和 html5。

缺點：不允許使用腳本。

2.2.3、iframe 嵌入：

使用語法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>

src是 SVG 文件路徑，width、height、frameborder 設(shè)置的大小和邊框。

優(yōu)點：所有瀏覽器都支持，并允許使用腳本。

缺點：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.4、html中嵌入：

svg 標(biāo)簽直接插入 html 內(nèi)容內(nèi)，與其他標(biāo)簽用法一致。

2.2.5、連接到svg文件：

使用 a 標(biāo)簽，直接鏈接到 SVG 文件。

使用語法：<a href="line.svg">查看SVG</a>

三、SVG形狀元素

3.1、線 - line

使用語法：
<svg width="300" height="300" >  
 <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>

使用line標(biāo)簽創(chuàng)建線條，(x1,y1)是起點，(x2,y2)是終點，stroke繪制黑線，stroke-width是線寬。

3.2、矩形 - rect

//使用語法：
<svg width="300" height="300" >
<rect 
 width="100" height="100"  //大小設(shè)置
 x="50" y="50"  //可選 左上角位置，svg的左上角默認(rèn)(0,0)
 rx="20" ry="50" //可選 設(shè)置圓角
 stroke-width="3" stroke="red" fill="pink" //繪制樣式控制
></rect>
</svg>

上述參數(shù) width、height是必填參數(shù)，x、y是可選參數(shù)，如不設(shè)置的時候，默認(rèn)為(0,0)，也就是svg的左上角開始繪制。rx、ry是可選參數(shù)，不設(shè)置是矩形沒有圓角。fill定義填充顏色。

3.3、圓形 - circle

// 使用語法
<svg width="300" height="300" >
 <circle 
  cx="100" cy="50" // 定義圓心 ，可選
  r="40" // 圓的半徑
  stroke="black" stroke-width="2" fill="red"/> //繪制黑框填充紅色
</svg>

上述(cx,xy)定義圓心的位置，是可選參數(shù)，如果不設(shè)置默認(rèn)圓心是（0,0）。r是必需參數(shù)，設(shè)置圓的半徑。

3.4、橢圓 - ellipse

橢圓與圓相似，不同之處在于橢圓有不同的x和y半徑，而圓兩個半徑是相同的。

// 使用語法
<svg width="300" height="300" >
 <ellipse 
  rx="20" ry="100" //設(shè)置橢圓的x、y方向的半徑
  fill="purple" // 橢圓填充色
  cx="150" cy="150" //設(shè)置橢圓的圓心 ，可選參數(shù)
 ></ellipse>
</svg>

上述橢圓的兩個rx、ry兩個方向半徑是必須參數(shù)，如果rx=ry就表示是圓形，（cx,cy）是橢圓的圓心，是可選參數(shù)，如果不設(shè)置，則默認(rèn)圓心為（0,0）。

3.5、折線 - polyline

// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
  <!-- 繪制出一個默認(rèn)填充黑色的三角形 -->
 <polyline 
  points=" //點的集合
   0 ,0, // 第一個點坐標(biāo)
   100,100, // 第二個點坐標(biāo)
   100,200 // 第三個點坐標(biāo)
    " 
  stroke="green" 
 ></polyline>
<!-- 繪制一個臺階式的一條折線 -->
 <polyline 
  points="0,0,50,0,50,50,100,50,100,100,150,100,150,150" 
  stroke="#4b27ff" fill="none"
 ></polyline>
</svg>

上述代碼執(zhí)行結(jié)果如圖所示：

需要注意的是 points 中包含了多個點的坐標(biāo)，但不是一個數(shù)組。

3.6、多邊形 - polygon

polygon 標(biāo)簽用來創(chuàng)建不少于3個邊的圖形，多邊形是閉合的，即所有線條連接起來。

// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
 <polygon 
  points="
    0,0,   //多邊形的第一點
   100,100,  //多邊形的第二點
    0,100  //多邊形的第三點
  " 
	stroke="purple"
	stroke-width="1"
	fill="none"
 ></polygon>
</svg>

polygon繪制的時候與折線有些類似，但是polygon會自動閉合，折線不會。

3.7、路徑 - path

path 是SVG基本形狀中最強大的一個，不僅能創(chuàng)建其他基本形狀，還能創(chuàng)建更多其他形狀，如貝塞爾曲線、2次曲線等。

點個關(guān)注，下篇更精彩！

轉(zhuǎn)品牌升級后更新了全新的Logo，今天我們用純CSS來實現(xiàn)轉(zhuǎn)轉(zhuǎn)的新Logo，為了有一定的挑戰(zhàn)性，這里我們只使用一個標(biāo)簽實現(xiàn)，將最大化的使用CSS能力完成Logo的繪制與動畫效果。

新logo保留了原本logo里轉(zhuǎn)轉(zhuǎn)熊的輪廓，兩個熊耳是兩個衛(wèi)星圍繞熊頭旋轉(zhuǎn)，是“循環(huán)”的意思。中間傾斜的轉(zhuǎn)轉(zhuǎn)首字母“Z”，既像二手質(zhì)檢的印章，又像N——NEW的首字母，代表著全新的二手生活方式。

以上是我們要還原的Logo效果動圖，現(xiàn)階段使用方式主要是gif和lottie SVG兩種方式。因為我們的目的是使用單標(biāo)簽實現(xiàn)所有的功能點，對于一些細(xì)節(jié)部分有所取舍，并不是百分百還原，也并不代表使用CSS的成本和效果是最好的，僅表達CSS的強大能力。接下來分析我們要核心實現(xiàn)的功能點：

• 開始動畫時中心的大圓以及2個圍繞的小圓都有放大的效果
• 動畫開始后2個小圓圍繞中心的橢圓旋轉(zhuǎn)
• 字母 Z 由大變小覆蓋在中心的橢圓
• 字母 Z 出現(xiàn)時中心的橢圓由紅色邊框圓變成實心紅色圓
• 仔細(xì)觀察這個字母 Z 并不是普通的字符

基于上述分析接下來開始核心的代碼拆解實現(xiàn)，在開始前先定義一些變量方便后續(xù)使用：

:root {
  /* 主題色 */
  --mainColor: #ff483c;
  /* 字體顏色 */
  --fontColor: #fff;
  /* 字體寬度 */
  --zWidth: 260px;
  /* 中心橢圓寬高比 */
  --parentScaleY: 0.9;
  /* 子元素抵消比例 */
  --childScaleY: calc(1 / var(--parentScaleY))
}

2個小圓旋轉(zhuǎn)動畫

如果是圍繞一個正圓的旋轉(zhuǎn)那么實現(xiàn)就簡單很多了，但是這里是一個橢圓，純CSS應(yīng)該怎么做呢？根據(jù)小編目前的了解大概有以下幾種方式都可以實現(xiàn)，但是對應(yīng)的效果有所區(qū)別：

• 使用 transform-style: preserve-3d;開啟3D模式，但是對應(yīng)的小圓在旋轉(zhuǎn)角度存在視角消失的情況，需要額外處理
• 使用 cubic-bezier 貝塞爾曲線執(zhí)行動畫可以達到橢圓曲線的效果，但是存在動畫開始停止不可控的情況
• 使用 rotate 0-360deg旋轉(zhuǎn)，對應(yīng)子元素需要設(shè)置反向旋轉(zhuǎn)來抵消父級的旋轉(zhuǎn)帶來的影響

對比各種情況最終使用第三個方案即可滿足條件且實現(xiàn)成本較低，首先畫出一個橢圓的邊框效果，設(shè)置scaleY和border-radius將一個正方形變成橢圓形，核心代碼如下：

  width: 570px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 10px solid var(--mainColor);
  transform: scaleY(var(--parentScaleY));

然后給這個大圓添加旋轉(zhuǎn)的動畫，將整體旋轉(zhuǎn)360度，這時還沒有添加其他的元素，所以界面沒有變化。

@keyframes circle {
  0% {
    transform: scaleY(var(--parentScaleY)) rotate(0);
  }
  100% {
    transform: scaleY(var(--parentScaleY)) rotate(360deg);
  }
}

設(shè)置大圓的動畫執(zhí)行相關(guān)參數(shù)。

animation: circle 1s 1 cubic-bezier(.5,.08,.52,.93) forwards;

邊框上面的兩個圈基于偽元素實現(xiàn)，繪制一個圓并使用定位將小圓定位于大圓的頂部兩端。然后設(shè)置動畫，這里需要注意的是需要設(shè)置反向旋轉(zhuǎn)來抵消父級的旋轉(zhuǎn)。

@keyframes mini-circle {
  0%{
    transform: rotate(0deg) scaleY(var(--childScaleY));
  }
 100%{
    transform: rotate(-360deg) scaleY(var(--childScaleY));
  }
}

這里為了方便查看將橢圓的參數(shù)調(diào)大進行對比，可以看到設(shè)置抵消后的區(qū)別一個圓被壓縮了另一個保持了正常的圓形：

未設(shè)置抵消

已設(shè)置抵消

這里為了更好的利用元素的使用，這里將兩個圓的繪制進一步優(yōu)化到一個偽元素中，核心使用徑向漸變背景實現(xiàn)，在同一個 background 中繪制兩個純色圓形，兩個圓除了繪制的位置不同其他都是一樣。代碼如下：

background: 
  radial-gradient(circle 65px at 31% 24.5%,var(--mainColor) 0% 100%, transparent),
  radial-gradient(circle 65px at 72% 24.5%, var(--mainColor) 0% 100%, transparent);

到此這部分的內(nèi)容基本功能完成，實際效果如下：

Z 字母

接下來使用另一個偽元素實現(xiàn) Z 字母的效果，仔細(xì)觀察 Z 字母的兩個拐角都是銳角效果，并不是日常字母有拐角的效果。

基于當(dāng)前的樣式我們可以用3段矩形拼接完成效果，上下各一段，中間一段增加旋轉(zhuǎn)角度，但是只用一個偽元素如何繪制三個矩形呢，還是用到CSS漸變，這次需要用到linear-gradient線性漸變，頂部和底部正常從上往下繪制，中間的部分需要繪制線條的旋轉(zhuǎn)角度，除開需要顯示的顏色其他部分用#0000透明色，為了方便看效果對三個矩形更換了不同的顏色，代碼如下：

background: 
  linear-gradient(#f00 25%, #0000 25%),
  linear-gradient(#0000 75%, #29eb9a 25%),
  linear-gradient(124deg, #0000 40%, #000 40% 60%, #0000 60%);

繪制的效果如下：

可以看到目前的效果還不能滿足需求，兩端都出現(xiàn)了多余的部分，需要進一步優(yōu)化將其隱藏。這時候需要用到background-size與background-position，通過background-size設(shè)置繪制內(nèi)容的大小，通過設(shè)置background-position設(shè)置繪制內(nèi)容的起點位置，因為設(shè)置了一定的空隙部分需要增加no-repeat不重復(fù)，增加以下代碼：

background-size: 80% var(--w), 80% var(--w), 100% 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;

此時基本符合預(yù)期的效果，但實際設(shè)計圖左下角的銳角部分有超出正常矩形一部分。

所以需要對剛剛設(shè)置的size和position部分改進，將第一個矩形左側(cè)空出16px：

background-size: 74% var(--w), 80% var(--w), 100% 100%;
background-position: 16px 0, 100% 0;

因為空出了左側(cè)一部分距離，導(dǎo)致整個內(nèi)容不再是一個正方形，所以需要設(shè)置 scaleX 還原寬度將圖像還原到正方形。

對于剛剛設(shè)置的background相關(guān)屬性可以在代碼層進一步優(yōu)化，使用簡寫將代碼合并到一行：

background:
  linear-gradient(var(--fontColor) 25%, #0000 25%) 16px 0 / 74% var(--zWidth) no-repeat,
  linear-gradient(#0000 75%, var(--fontColor) 25%) 100% 0 / 80% var(--zWidth) no-repeat,
  linear-gradient(124deg, #0000 40%, var(--fontColor) 40% 60%, #0000 60%) 0 0 / 100% 100% no-repeat;

然后繼續(xù)給這個 Z 添加動畫效果，默認(rèn)設(shè)置 opacity: 0 隱藏，因為 Z 是小圓動畫執(zhí)行結(jié)束才出現(xiàn)的，所以還需增加動畫的延遲執(zhí)行時間，增加動畫相關(guān)代碼：

animation: z 0.3s 1s 1 ease-in-out forwards;
opacity: 0;

設(shè)置動畫將內(nèi)容從1.5倍縮小到正常并設(shè)置旋轉(zhuǎn)角度，返抵消以及平移到Logo正中心。這里因為初始增加了1.5的放大所以設(shè)置返抵消相關(guān)參數(shù)有所不同，在設(shè)置scaleY的同時還設(shè)置了skew進一步還原尺寸。

@keyframes z {
  0% {
    transform: rotate(-45deg) scale(1.5) translate(0, -50%) skew(-13deg, 8deg);
    opacity: 1;
  }
  100% {
    transform: rotate(-42deg) scaleY(var(--childScaleY)) translate(-4%, -64%) skew(-13deg, 8deg);
    opacity: 1;
  }
}

完成后的 Z 字母動畫效果：

其他細(xì)節(jié)

開始動畫時中心的橢圓以及2個圍繞的小圓都有放大的效果，所以需要對前面動畫關(guān)鍵幀的定義繼續(xù)完善。

小圓部分執(zhí)行動畫的前10%也增加scale(0.5)。

@keyframes mini-circle {
  0%{
    transform: rotate(0) scale(0.5);
  }
  10%{
    transform: rotate(0) scaleY(var(--childScaleY));
  }
}

大圓執(zhí)行動畫的前10%部分增加scale(0.8)。大圓部分還有一個效果是字母 Z 出現(xiàn)的時候中心的橢圓由邊框圓變成實心圓，所以是在動畫結(jié)束前增加對背景色的變化，代碼如下：

@keyframes circle {
  0% {
    transform: scale(0.8) rotate(0);
  }
  10% {
    transform: scaleY(var(--parentScaleY)) rotate(0);
  }
  80% {
    background-color: var(--fontColor);
  }
  100% {
    background-color: var(--mainColor);
    transform: scaleY(var(--parentScaleY)) rotate(360deg);
  }
}

最后

到此我們整個代碼實現(xiàn)過程就結(jié)束了，基于一個標(biāo)簽實現(xiàn)了轉(zhuǎn)轉(zhuǎn)的Logo的繪制及動畫效果。當(dāng)然這只是對其主要的功能還原，如需完整還原細(xì)節(jié)還需要進一步優(yōu)化。

CSS的確是足夠強大且對很多復(fù)雜的圖形效果都能實現(xiàn)，這里我們主要是使用漸變背景實現(xiàn)圖案的繪制，除了漸變還可以使用CSS陰影也能達到類似的效果。使用CSS對比使用SVG或GIF在資源體積上有很大的提升，本次實現(xiàn)的Logo使用lottie的json需要100KB左右，使用GIF大約需要27KB左右，但是純CSS實現(xiàn)僅1KB不到即可完成，但是對于較為復(fù)雜的場景對應(yīng)的代碼也提升了不少的復(fù)雜度，大家要根據(jù)實際的情況使用，感興趣的同學(xué)歡迎留言交流。

作者:大轉(zhuǎn)轉(zhuǎn)FE

來源:微信公眾號:大轉(zhuǎn)轉(zhuǎn)FE

出處:https://mp.weixin.qq.com/s/CUfAKou5LEYtwzYB83LWdA