图标鼠标移入移出动态效果-526互联

效果示例

效果示例
这种效果起初是在腾讯云的官网上发现的，对这个效果比较好奇，所以就看了一下他的实现。然后自己写个demo记录一下。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <style>
    .item-box {
      position: relative;
      width: 200px;
      height: 80px;
      display: flex;
      align-items: center;
      box-shadow: 0px 4px 8px 1px rgba(57, 58, 55, 0.84);
      border-radius: 3px;
      justify-content: space-around;
    }

    .mini-icon {
      background-image: url(./images/mini-icon.png);
      width: 48px;
      height: 48px;
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: top;
    }

    .mini-icon.is-leave {
      animation: mini-icon-leave .3s steps(16) forwards;
    }

    .mini-icon.is-enter {
      animation: mini-icon-enter .3s steps(16) forwards;
    }

    @keyframes mini-icon-leave {
      0% {
        background-position: 0 -768px
      }

      to {
        background-position: 0 0
      }
    }

    @keyframes mini-icon-enter {
      0% {
        background-position: 0 0
      }

      to {
        background-position: 0 -768px
      }
    }
  </style>
</head>

<body>
  <div class="item-box">
    <span class="item-name">小程序</span>
    <span class="mini-icon"></span>
  </div>
</body>
<script>
  const miniIcon = document.querySelector('.mini-icon');

  miniIcon.addEventListener('mouseenter', () => {
    miniIcon.classList.add('is-enter');
  })
  miniIcon.addEventListener('mouseleave', () => {
    miniIcon.classList.remove('is-enter');
    miniIcon.classList.add('is-leave');
  })
</script>

</html>

顺便贴一下用到的背景图片
这个效果主要用了三个知识点，animation、@keyframes还有js动态的给dom添加移除类名