纯纯css如何hover之后变成动态图标呢

今天学习一个炫酷的小技能，纯纯css实现动态图标，hover之后静止在某一个图标。

Demo效果如下：

首先我们需要准备一个雪碧图，我这里是在阿里图标库下载的。

用美图秀秀在线拼接的雪碧图

另外就需要一个`HTML`文件啦。

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

到这里我们的HTML文件就全部写完啦

接下来就是今天的重点`CSS`的部分了

由于更好的语义化，保留在HTML中的文字部分，在CSS中设置transparent颜色使得文字隐形，另外给图片设置宽高等基础效果。（图片我是在ant 官网下载的，如果需要练习也可以自己设置图片）

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

这时候我们就可以得到一个图片的效果。

那么问题来了，我们如何把图标设置叠上这个效果呢。我们这里使用伪元素生成一个小图标，具体操作如下（根据自己的图片来进行调整）：

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

可以看到现在已经有图标的效果了，那我们如何让图标动起来了，只需要利用 CSS 动画函数中的 steps()[2] 功能符，就可以实现逐帧动画，首先定义一个关键帧，改变背景位置就行了。如下：

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

这里小图标总共有 11 张，相互之间的变化就是 10 步，所以动画设置如下

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

这样就得到了一个无限循环的逐帧动画

通过animation-play-state主动设置暂停，如下

.logo::after{
 /*其他样式*/
  animation: random 1s steps(10) infinite;
  animation-play-state: paused; /*动画暂停*/
}

这样下来，默认就不会动了，然后在hover的时候“运行”就行了

.logo:hover::after{
  animation-play-state: running; /*动画运行*/
}

好了，能看到这里我真的非常爱你了，下期再见。

最后编辑于：2022.02.07 17:23:14