今天學習一個炫酷的小技能，純純css實現(xiàn)動態(tài)圖標，hover之后靜止在某一個圖標。

Demo效果如下：

首先我們需要準備一個雪碧圖，我這里是在阿里圖標庫下載的。

用美圖秀秀在線拼接的雪碧圖

另外就需要一個HTML文件啦。

<h1 class="logo">Ant Design</h1>

到這里我們的HTML文件就全部寫完啦

接下來就是今天的重點CSS的部分了

由于更好的語義化，保留在HTML中的文字部分，在CSS中設置transparent顏色使得文字隱形，另外給圖片設置寬高等基礎效果。（圖片我是在ant 官網(wǎng)下載的，如果需要練習也可以自己設置圖片）

  .logo {
            width: 1020px;
            height: 180px;
            position: relative;
            color: transparent;
            background: url(./AntDesign.svg) no-repeat 100% 100%;
            cursor: pointer;
        }

這時候我們就可以得到一個圖片的效果。

那么問題來了，我們?nèi)绾伟褕D標設置疊上這個效果呢。我們這里使用偽元素生成一個小圖標，具體操作如下（根據(jù)自己的圖片來進行調(diào)整）：

  .logo::after {
            content: '';
            position: absolute;
            width: 35px;
            height: 35px;
            background: url(./shouhuiyusan.png) 0 / cover no-repeat;
            right: 245px;
            top: -18px;
        }

可以看到現(xiàn)在已經(jīng)有圖標的效果了，那我們?nèi)绾巫寛D標動起來了，只需要利用 CSS 動畫函數(shù)中的 steps()[2] 功能符，就可以實現(xiàn)逐幀動畫，首先定義一個關鍵幀，改變背景位置就行了。如下：

@keyframes random {
  to {
    background-position: 100%;
  }
}

這里小圖標總共有 11 張，相互之間的變化就是 10 步，所以動畫設置如下

.logo::after{
 /*其他樣式*/
  animation: random 1s steps(10) infinite;
}

這樣就得到了一個無限循環(huán)的逐幀動畫

通過animation-play-state主動設置暫停，如下

.logo::after{
 /*其他樣式*/
  animation: random 1s steps(10) infinite;
  animation-play-state: paused; /*動畫暫停*/
}

這樣下來，默認就不會動了，然后在hover的時候“運行”就行了

.logo:hover::after{
  animation-play-state: running; /*動畫運行*/
}

好了，能看到這里我真的非常愛你了，下期再見。