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

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

以上是我們要還原的Logo效果動(dòng)圖，現(xiàn)階段使用方式主要是gif和lottie SVG兩種方式。因?yàn)槲覀兊哪康氖鞘褂脝螛?biāo)簽實(shí)現(xiàn)所有的功能點(diǎn)，對(duì)于一些細(xì)節(jié)部分有所取舍，并不是百分百還原，也并不代表使用CSS的成本和效果是最好的，僅表達(dá)CSS的強(qiáng)大能力。接下來(lái)分析我們要核心實(shí)現(xiàn)的功能點(diǎn)：

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

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

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

2個(gè)小圓旋轉(zhuǎn)動(dòng)畫

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

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

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

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

圖片

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

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

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

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

邊框上面的兩個(gè)圈基于偽元素實(shí)現(xiàn)，繪制一個(gè)圓并使用定位將小圓定位于大圓的頂部?jī)啥恕Ｈ缓笤O(shè)置動(dòng)畫，這里需要注意的是需要設(shè)置反向旋轉(zhuǎn)來(lái)抵消父級(jí)的旋轉(zhuǎn)。

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

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

未設(shè)置抵消

已設(shè)置抵消

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

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)容基本功能完成，實(shí)際效果如下：

圖片

Z 字母

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

圖片

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

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)了多余的部分，需要進(jìn)一步優(yōu)化將其隱藏。這時(shí)候需要用到background-size與background-position，通過(guò)background-size設(shè)置繪制內(nèi)容的大小，通過(guò)設(shè)置background-position設(shè)置繪制內(nèi)容的起點(diǎn)位置，因?yàn)樵O(shè)置了一定的空隙部分需要增加no-repeat不重復(fù)，增加以下代碼：

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

圖片

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

圖片

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

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

因?yàn)榭粘隽俗髠?cè)一部分距離，導(dǎo)致整個(gè)內(nèi)容不再是一個(gè)正方形，所以需要設(shè)置 scaleX 還原寬度將圖像還原到正方形。

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

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ù)給這個(gè) Z 添加動(dòng)畫效果，默認(rèn)設(shè)置 opacity: 0 隱藏，因?yàn)?Z 是小圓動(dòng)畫執(zhí)行結(jié)束才出現(xiàn)的，所以還需增加動(dòng)畫的延遲執(zhí)行時(shí)間，增加動(dòng)畫相關(guān)代碼：

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

設(shè)置動(dòng)畫將內(nèi)容從1.5倍縮小到正常并設(shè)置旋轉(zhuǎn)角度，返抵消以及平移到Logo正中心。這里因?yàn)槌跏荚黾恿?.5的放大所以設(shè)置返抵消相關(guān)參數(shù)有所不同，在設(shè)置scaleY的同時(shí)還設(shè)置了skew進(jìn)一步還原尺寸。

@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 字母動(dòng)畫效果：

圖片

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

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

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

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

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

@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);
  }
}

最后

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

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