CSS單標簽實現轉轉logo
轉轉品牌升級后更新了全新的Logo，今天我們用純CSS來實現轉轉的新Logo，為了有一定的挑戰性，這里我們只使用一個標簽實現，將最大化的使用CSS能力完成Logo的繪制與動畫效果。
新logo保留了原本logo里轉轉熊的輪廓，兩個熊耳是兩個衛星圍繞熊頭旋轉，是“循環”的意思。中間傾斜的轉轉首字母“Z”，既像二手質檢的印章，又像N——NEW的首字母，代表著全新的二手生活方式。
以上是我們要還原的Logo效果動圖，現階段使用方式主要是gif和lottie SVG兩種方式。因為我們的目的是使用單標簽實現所有的功能點，對于一些細節部分有所取舍，并不是百分百還原，也并不代表使用CSS的成本和效果是最好的，僅表達CSS的強大能力。接下來分析我們要核心實現的功能點：
- 開始動畫時中心的大圓以及2個圍繞的小圓都有放大的效果
- 動畫開始后2個小圓圍繞中心的橢圓旋轉
- 字母 Z 由大變小覆蓋在中心的橢圓
- 字母 Z 出現時中心的橢圓由紅色邊框圓變成實心紅色圓
- 仔細觀察這個字母 Z 并不是普通的字符
基于上述分析接下來開始核心的代碼拆解實現，在開始前先定義一些變量方便后續使用：
:root {
/* 主題色 */
--mainColor: #ff483c;
/* 字體顏色 */
--fontColor: #fff;
/* 字體寬度 */
--zWidth: 260px;
/* 中心橢圓寬高比 */
--parentScaleY: 0.9;
/* 子元素抵消比例 */
--childScaleY: calc(1 / var(--parentScaleY))
}2個小圓旋轉動畫
如果是圍繞一個正圓的旋轉那么實現就簡單很多了，但是這里是一個橢圓，純CSS應該怎么做呢？根據小編目前的了解大概有以下幾種方式都可以實現，但是對應的效果有所區別：
- 使用 transform-style: preserve-3d;開啟3D模式，但是對應的小圓在旋轉角度存在視角消失的情況，需要額外處理
- 使用 cubic-bezier 貝塞爾曲線執行動畫可以達到橢圓曲線的效果，但是存在動畫開始停止不可控的情況
- 使用 rotate 0-360deg旋轉，對應子元素需要設置反向旋轉來抵消父級的旋轉帶來的影響
對比各種情況最終使用第三個方案即可滿足條件且實現成本較低，首先畫出一個橢圓的邊框效果，設置scaleY和border-radius將一個正方形變成橢圓形，核心代碼如下：
width: 570px;
aspect-ratio: 1;
border-radius: 50%;
border: 10px solid var(--mainColor);
transform: scaleY(var(--parentScaleY));
圖片
然后給這個大圓添加旋轉的動畫，將整體旋轉360度，這時還沒有添加其他的元素，所以界面沒有變化。
@keyframes circle {
0% {
transform: scaleY(var(--parentScaleY)) rotate(0);
}
100% {
transform: scaleY(var(--parentScaleY)) rotate(360deg);
}
}設置大圓的動畫執行相關參數。
animation: circle 1s 1 cubic-bezier(.5,.08,.52,.93) forwards;邊框上面的兩個圈基于偽元素實現，繪制一個圓并使用定位將小圓定位于大圓的頂部兩端。然后設置動畫，這里需要注意的是需要設置反向旋轉來抵消父級的旋轉。
@keyframes mini-circle {
0%{
transform: rotate(0deg) scaleY(var(--childScaleY));
}
100%{
transform: rotate(-360deg) scaleY(var(--childScaleY));
}
}這里為了方便查看將橢圓的參數調大進行對比，可以看到設置抵消后的區別一個圓被壓縮了另一個保持了正常的圓形：
未設置抵消
已設置抵消
這里為了更好的利用元素的使用，這里將兩個圓的繪制進一步優化到一個偽元素中，核心使用徑向漸變背景實現，在同一個 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);到此這部分的內容基本功能完成，實際效果如下：
圖片
Z 字母
接下來使用另一個偽元素實現 Z 字母的效果，仔細觀察 Z 字母的兩個拐角都是銳角效果，并不是日常字母有拐角的效果。
圖片
基于當前的樣式我們可以用3段矩形拼接完成效果，上下各一段，中間一段增加旋轉角度，但是只用一個偽元素如何繪制三個矩形呢，還是用到CSS漸變，這次需要用到linear-gradient線性漸變，頂部和底部正常從上往下繪制，中間的部分需要繪制線條的旋轉角度，除開需要顯示的顏色其他部分用#0000透明色，為了方便看效果對三個矩形更換了不同的顏色，代碼如下：
background:
linear-gradient(#f00 25%, #0000 25%),
linear-gradient(#0000 75%, #29eb9a 25%),
linear-gradient(124deg, #0000 40%, #000 40% 60%, #0000 60%);繪制的效果如下：
圖片
可以看到目前的效果還不能滿足需求，兩端都出現了多余的部分，需要進一步優化將其隱藏。這時候需要用到background-size與background-position，通過background-size設置繪制內容的大小，通過設置background-position設置繪制內容的起點位置，因為設置了一定的空隙部分需要增加no-repeat不重復，增加以下代碼：
background-size: 80% var(--w), 80% var(--w), 100% 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
圖片
此時基本符合預期的效果，但實際設計圖左下角的銳角部分有超出正常矩形一部分。
圖片
所以需要對剛剛設置的size和position部分改進，將第一個矩形左側空出16px：
background-size: 74% var(--w), 80% var(--w), 100% 100%;
background-position: 16px 0, 100% 0;因為空出了左側一部分距離，導致整個內容不再是一個正方形，所以需要設置 scaleX 還原寬度將圖像還原到正方形。
對于剛剛設置的background相關屬性可以在代碼層進一步優化，使用簡寫將代碼合并到一行：
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;然后繼續給這個 Z 添加動畫效果，默認設置 opacity: 0 隱藏，因為 Z 是小圓動畫執行結束才出現的，所以還需增加動畫的延遲執行時間，增加動畫相關代碼：
animation: z 0.3s 1s 1 ease-in-out forwards;
opacity: 0;設置動畫將內容從1.5倍縮小到正常并設置旋轉角度，返抵消以及平移到Logo正中心。這里因為初始增加了1.5的放大所以設置返抵消相關參數有所不同，在設置scaleY的同時還設置了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 字母動畫效果：
圖片
其他細節
開始動畫時中心的橢圓以及2個圍繞的小圓都有放大的效果，所以需要對前面動畫關鍵幀的定義繼續完善。
小圓部分執行動畫的前10%也增加scale(0.5)。
@keyframes mini-circle {
0%{
transform: rotate(0) scale(0.5);
}
10%{
transform: rotate(0) scaleY(var(--childScaleY));
}
}大圓執行動畫的前10%部分增加scale(0.8)。大圓部分還有一個效果是字母 Z 出現的時候中心的橢圓由邊框圓變成實心圓，所以是在動畫結束前增加對背景色的變化，代碼如下：
@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);
}
}最后
到此我們整個代碼實現過程就結束了，基于一個標簽實現了轉轉的Logo的繪制及動畫效果。當然這只是對其主要的功能還原，如需完整還原細節還需要進一步優化。
CSS的確是足夠強大且對很多復雜的圖形效果都能實現，這里我們主要是使用漸變背景實現圖案的繪制，除了漸變還可以使用CSS陰影也能達到類似的效果。使用CSS對比使用SVG或GIF在資源體積上有很大的提升，本次實現的Logo使用lottie的json需要100KB左右，使用GIF大約需要27KB左右，但是純CSS實現僅1KB不到即可完成，但是對于較為復雜的場景對應的代碼也提升了不少的復雜度，大家要根據實際的情況使用，
