《英雄聯(lián)盟》夏季賽總決賽今日開打！JDG對(duì)陣LNG首發(fā)名單來了 Knight：準(zhǔn)備三連冠
8月5日消息，今日17:00，《英雄聯(lián)盟》2023LPL夏季賽總決賽將正式開打，由JDG對(duì)陣LNG。對(duì)兩支隊(duì)伍來說，這場(chǎng)比賽不僅要爭(zhēng)奪夏季賽冠軍，更要決定誰才是LPL賽區(qū)一
轉(zhuǎn)轉(zhuǎn)品牌升級(jí)后更新了全新的Logo，今天我們用純CSS來實(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)大能力。接下來分析我們要核心實(shí)現(xiàn)的功能點(diǎn)：
基于上述分析接下來開始核心的代碼拆解實(shí)現(xiàn)，在開始前先定義一些變量方便后續(xù)使用：
:root { /* 主題色 */ --mainColor: #ff483c; /* 字體顏色 */ --fontColor: #fff; /* 字體寬度 */ --zWidth: 260px; /* 中心橢圓寬高比 */ --parentScaleY: 0.9; /* 子元素抵消比例 */ --childScaleY: calc(1 / var(--parentScaleY))}如果是圍繞一個(gè)正圓的旋轉(zhuǎn)那么實(shí)現(xiàn)就簡(jiǎn)單很多了，但是這里是一個(gè)橢圓，純CSS應(yīng)該怎么做呢？根據(jù)小編目前的了解大概有以下幾種方式都可以實(shí)現(xiàn)，但是對(duì)應(yīng)的效果有所區(qū)別：
對(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)來抵消父級(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í)際效果如下：
圖片
基于當(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，通過background-size設(shè)置繪制內(nèi)容的大小，通過設(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)畫效果：
圖片
開始動(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)過程就結(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í)際的情況使用，
本文鏈接：http://www.tebozhan.com/showinfo-26-82-0.htmlCSS單標(biāo)簽實(shí)現(xiàn)轉(zhuǎn)轉(zhuǎn)logo
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)