返回

把玩前端：解锁Ant Design官网Logo上的交互彩蛋

前端

当然，我知道 Ant Design 是由蚂蚁金服团队打造的优秀的前端UI框架，它有着非常丰富、实用的组件库，以及完善的开发规范和文档，备受业界青睐。

当我在 Ant Design 官网上，将鼠标悬停在 Logo 的字母“i”上时，我注意到了一个非常有趣的彩蛋效果。字母“i”上方的点，会不断地变化成不同的图标，当我离开 Logo 时，变化停止，当我再次悬停时，变化又重新开始。这种效果非常有趣，也充分展现了 Ant Design 团队的创意和设计功底。

一、原理解析

这个彩蛋效果的实现原理非常简单，它利用了 CSS 的过渡动画来实现图标的切换。当鼠标悬停在字母“i”上时，CSS 会为小点添加一个过渡动画，使小点在不同的图标之间平滑过渡。当鼠标离开字母“i”时，CSS 会停止动画，小点就保持在最后一个图标的状态。

二、实现步骤

  1. 准备图标

首先，我们需要准备一组图标，这些图标将用在彩蛋效果中。你可以使用现成的图标库，也可以自己设计图标。

  1. 添加CSS样式

接下来，我们需要为这些图标添加CSS样式，以便在鼠标悬停时触发动画。我们可以使用 CSS 的 transition 属性来实现动画效果。

  1. 添加HTML代码

最后，我们需要在 HTML 代码中添加这些图标的 HTML 代码，并为这些图标添加适当的 CSS 类名。

三、完整代码示例

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="logo">
    <span>Ant</span>
    <span class="i">
      <img src="i1.png">
      <img src="i2.png">
      <img src="i3.png">
    </span>
    <span>Design</span>
  </div>

  <script src="script.js"></script>
</body>
</html>

.logo {
  font-size: 36px;
  font-weight: bold;
}

.i {
  position: relative;
  display: inline-block;
}

.i img {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.i img:first-child {
  opacity: 1;
}

.logo:hover .i img {
  opacity: 1;
}

.logo:hover .i img:first-child {
  opacity: 0;
}

const images = document.querySelectorAll('.i img');

const interval = setInterval(() => {
  for (let i = 0; i < images.length; i++) {
    images[i].classList.toggle('active');
  }
}, 500);

四、总结

通过以上步骤，我们就实现了 Ant Design 官网 Logo 上的彩蛋效果。这个效果非常简单，但它却非常有趣，能够吸引用户的眼球。如果你正在使用 Ant Design，不妨试着实现一下这个效果，相信你会收获意想不到的惊喜。