点击刷新时图标变换：使用 CSS 动画实现动态效果

这可以通过使用 CSS 中的 @keyframes 和 animation 来实现。我们可以为 icon 定义一个新的 class，然后使用 animation 来定义一个动画，使其在点击时刷新 icon。下面是一个示例代码：

HTML 代码：

<button class='refresh-btn'>
  <i class='icon-refresh'></i>
  Refresh
</button>

CSS 代码：

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.icon-refresh {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('refresh-icon.png');
}

.refresh-btn.clicked .icon-refresh {
  animation: spin 1s linear infinite;
}

.refresh-btn.clicked:after {
  content: '...';
  margin-left: 5px;
  animation: dots 1s linear infinite;
}

@keyframes dots {
  from {
    content: '...';
  }
  33% {
    content: '..';
  }
  66% {
    content: '.';
  }
  to {
    content: '...';
  }
}

JavaScript 代码：

const refreshBtn = document.querySelector('.refresh-btn');

refreshBtn.addEventListener('click', function() {
  refreshBtn.classList.add('clicked');
  
  setTimeout(function() {
    refreshBtn.classList.remove('clicked');
  }, 3000); // 3秒后取消点击效果
});

在上面的示例代码中，我们为 icon 定义了一个 class，使用了 background-image 来设置其背景图片。在按钮被点击时，我们使用 JavaScript 为按钮添加了一个 clicked 的 class，这将触发 CSS 中定义的动画效果。我们还使用了 setTimeout 函数来在 3 秒后将 clicked 的 class 从按钮中移除，以取消点击效果。