建站
咨詢
售后
建站咨詢
新聞中心
轉(zhuǎ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的成本和效果是最好的，僅表達(dá)CSS的強(qiáng)大能力。接下來分析我們要核心實現(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í)行動畫可以達(dá)到橢圓曲線的效果，但是存在動畫開始停止不可控的情況
- 使用 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)大進(jìn)行對比，可以看到設(shè)置抵消后的區(qū)別一個圓被壓縮了另一個保持了正常的圓形：
未設(shè)置抵消
已設(shè)置抵消
這里為了更好的利用元素的使用，這里將兩個圓的繪制進(jìn)一步優(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)了多余的部分，需要進(jì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部分改進(jìn)，將第一個矩形左側(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)屬性可以在代碼層進(jì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進(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 字母動畫效果：
圖片
其他細(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é)還需要進(jìn)一步優(yōu)化。
CSS的確是足夠強(qiáng)大且對很多復(fù)雜的圖形效果都能實現(xiàn)，這里我們主要是使用漸變背景實現(xiàn)圖案的繪制，除了漸變還可以使用CSS陰影也能達(dá)到類似的效果。使用CSS對比使用SVG或GIF在資源體積上有很大的提升，本次實現(xiàn)的Logo使用lottie的json需要100KB左右，使用GIF大約需要27KB左右，但是純CSS實現(xiàn)僅1KB不到即可完成，但是對于較為復(fù)雜的場景對應(yīng)的代碼也提升了不少的復(fù)雜度，大家要根據(jù)實際的情況使用，
網(wǎng)頁名稱：CSS單標(biāo)簽實現(xiàn)轉(zhuǎn)轉(zhuǎn)logo
標(biāo)題URL：http://www.dlmjj.cn/article/djdcsjp.html
