這篇文章的內(nèi)容主要圍繞怎么使用純CSS仿AntDesign的Logo彩蛋效果進(jìn)行講述，文章內(nèi)容清晰易懂，條理清晰，非常適合新手學(xué)習(xí)，值得大家去閱讀。感興趣的朋友可以跟隨小編一起閱讀吧。希望大家通過這篇文章有所收獲！
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供望城企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為望城眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。
最近項(xiàng)目中 Ant Design 接入比較多，還是非常不錯(cuò)的。不知道大家有沒有發(fā)現(xiàn)這樣的效果，在官網(wǎng)上，如果鼠標(biāo)放在Logo上，字母i上的圖標(biāo)會(huì)不停的變化，離開后停止，放上去重新變化，算得上是一個(gè)小彩蛋（可能我之前沒發(fā)現(xiàn)），演示如下：
不過沒發(fā)現(xiàn)也不意外，因?yàn)檫@個(gè)效果是 js 實(shí)現(xiàn)的，必須等待加載完成才能生效，而官網(wǎng)有時(shí)候又特別的慢，比如像這種還在加載的情況下，大概率是不會(huì)有以上的hover效果的
嗯，思考了一下，這種效果完全可以用純 CSS 來完成呀，實(shí)現(xiàn)成本又低，又能有效避免上述的加載問題，一起看看吧
一、CSS 實(shí)現(xiàn)原理
整個(gè)實(shí)現(xiàn)原理大致如下
準(zhǔn)備一個(gè)包含所有小圖標(biāo)的素材
創(chuàng)建一個(gè)改變背景位置的CSS逐幀動(dòng)畫
通過鼠標(biāo) hover 來控制動(dòng)畫運(yùn)行
二、素材準(zhǔn)備
為了避免多次請(qǐng)求，也為了方便創(chuàng)建動(dòng)畫，這里把所有小圖標(biāo)素材組合在一塊（從官網(wǎng)另存下來的），就像以前的“雪碧圖”一樣，如下
假設(shè) HTML 結(jié)構(gòu)是這樣的
Ant Design
為了更好的語義化，這里的文字建議保留，然后通過其他方式隱藏文字（比如透明度），可以將 logo 作為背景圖片，然后可變化的小圖標(biāo)用偽元素生成（裝飾性的元素都可以用偽元素來生成，保證HTML的整潔），CSS 如下
.logo{
width: 500px;
height: 100px;
position: relative;
color: transparent;
background: url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165011/c0e82c29.svg') center/contain no-repeat;
cursor: pointer;
}
.logo::after{
content: '';
position: absolute;
width: 32px;
height: 32px;
background: url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165415/b0005044.svg') 0 / cover no-repeat;
right: 113px;
top: -18px;
}靜態(tài)布局就算出來了
二、CSS 逐幀動(dòng)畫
然后是動(dòng)畫，只需要利用 CSS 動(dòng)畫函數(shù)中的 steps() 功能符，就可以實(shí)現(xiàn)逐幀動(dòng)畫
首先定義一個(gè)關(guān)鍵幀，改變背景位置就行了
@keyframes random {
to {
background-position: 100%;
}
}這里小圖標(biāo)總共有 11張，相互之間的變化就是 10步，所以動(dòng)畫設(shè)置如下
.logo::after{
/*其他樣式*/
animation: random 1s steps(10) infinite;
}這樣就得到了一個(gè)無限循環(huán)的逐幀動(dòng)畫
三、CSS動(dòng)畫的暫停與運(yùn)行
默認(rèn)情況下，CSS動(dòng)畫是默認(rèn)運(yùn)行的，但是現(xiàn)在的需求是，只有鼠標(biāo) hover 上去才會(huì)動(dòng)起來。
可能有同學(xué)會(huì)這樣做，默認(rèn)情況下沒有動(dòng)畫，hover 的時(shí)候創(chuàng)建動(dòng)畫，如下
.logo::after{
/*默認(rèn)無動(dòng)畫*/
}
.logo:hover::after{
animation: random 1s steps(10) infinite;
}但是這樣做會(huì)有兩個(gè)問題：
因此，這種方式并不可取
除了上述方式可以控制動(dòng)畫運(yùn)行之外，還可以通過animation-play-state主動(dòng)設(shè)置暫停，如下
.logo::after{
/*其他樣式*/
animation: random 1s steps(10) infinite;
animation-play-state: paused; /*動(dòng)畫暫停*/
}這樣下來，默認(rèn)就不會(huì)動(dòng)了，然后在hover的時(shí)候“運(yùn)行”就行了
.logo:hover::after{
animation-play-state: running; /*動(dòng)畫運(yùn)行*/
}四、指定初始位置
現(xiàn)在默認(rèn)是小圖標(biāo)是第一個(gè)，如果想指定另外一個(gè)，比如
這種情況如何處理呢
首先我們想到，可以手動(dòng)改變背景位置就行了，在第8個(gè)，所以
.logo::after{
/*其他樣式*/
background-position: -224px; /* 32 * 7 */
}效果如下
這樣下來，問題更多，由于改變了動(dòng)畫的起始位置，動(dòng)畫從第 8 個(gè)的地方運(yùn)動(dòng)到最右側(cè)，左邊的都不經(jīng)過了，step 也需要重新調(diào)整。
除了這種方式，還可以通過動(dòng)畫的“負(fù)延遲”來實(shí)現(xiàn)，給動(dòng)畫添加一個(gè)負(fù)的延遲后，動(dòng)畫會(huì)提前運(yùn)動(dòng)到未來位置。
比如這里想指定到未來第7幀的位置，就可以延遲負(fù)的總運(yùn)動(dòng)時(shí)長的 7/ 10 ，實(shí)現(xiàn)如下
.logo::after{
/*其他樣式*/
animation-delay: -.7s; /* 7 / 10 * 1s*/
}這樣就不會(huì)影響原有的動(dòng)畫了，完美實(shí)現(xiàn)
完整代碼可以訪問：Ant Design Logo (codepen.io)
https://codepen.io/xboxyan/pen/LYOPoxz
附上完整代碼（最近c(diǎn)odepen貌似不太穩(wěn)定）
.logo{
width: 500px;
height: 100px;
position: relative;
color: transparent;
background: url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165011/c0e82c29.svg') center/contain no-repeat;
cursor: pointer;
}
.logo::after{
content: '';
position: absolute;
width: 32px;
height: 32px;
background: url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165415/b0005044.svg') 0 / cover no-repeat;
right: 113px;
top: -18px;
animation: random 1s -.7s steps(10) infinite;
animation-play-state: paused;
}
.logo:hover::after{
animation-play-state: running;
}
@keyframes random {
to {
background-position: 100%;
}
}五、總結(jié)和說明
上面就是針對(duì) Ant Design 官網(wǎng) Logo 效果的 CSS 實(shí)現(xiàn)，代碼量非常少，而且也避免了 js 未加載完成時(shí)的問題，體驗(yàn)更好，下面簡單總結(jié)一下
CSS 渲染是及時(shí)的，只要頁面可見，就不會(huì)影響 CSS 交互
逐幀動(dòng)畫可以通過 CSS 動(dòng)畫 中的 step() 函數(shù)實(shí)現(xiàn)
CSS 動(dòng)畫可以自動(dòng)運(yùn)行，也可以手動(dòng)暫停
通過設(shè)置負(fù)的延時(shí)，可以讓 CSS 動(dòng)畫提前運(yùn)行
當(dāng)然，CSS 的優(yōu)點(diǎn)還不只這些，打開 Ant Design 控制臺(tái)，讓我有點(diǎn)崩潰的是，居然是不斷更換svg鏈接實(shí)現(xiàn)的，如果一直放在 Logo 上就會(huì)源源不斷的請(qǐng)求圖片，小圖標(biāo)也會(huì)出現(xiàn)“閃爍”的情況
感謝你的閱讀，相信你對(duì)“怎么使用純CSS仿AntDesign的Logo彩蛋效果”這一問題有一定的了解，快去動(dòng)手實(shí)踐吧，如果想了解更多相關(guān)知識(shí)點(diǎn)，可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站！小編會(huì)繼續(xù)為大家?guī)砀玫奈恼拢?/p>
新聞標(biāo)題：怎么使用純CSS仿AntDesign的Logo彩蛋效果
地址分享：http://weahome.cn/article/jgpoeo.html
重慶分公司
重慶分公司
