用CSS3实现魔兽技能转圈冷却效果

要实现魔兽技能转圈冷却效果，你可以使用CSS3的动画和过渡效果。下面是一个示例代码：

HTML:

<div class="cooldown">
  <div class="cooldown-mask"></div>
</div>

CSS:

.cooldown {
  position: relative;
  width: 100px;
  height: 100px;
}

.cooldown-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  transform-origin: center center;
  animation: cooldown 10s linear infinite;
}

@keyframes cooldown {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

在上面的代码中，我们创建了一个包含两个 <div> 元素的容器。第一个 <div> 元素（.cooldown）用于设置技能图标的大小和位置，第二个 <div> 元素（.cooldown-mask）用于实现冷却效果。

通过设置 .cooldown-mask 的 position: absolute;，它会相对于 .cooldown 元素进行定位。然后，我们设置了 transform-origin: center center;，使得旋转的中心点位于圆形的中心。

接下来，我们定义了一个名为 cooldown 的动画，它会在 10 秒内将 .cooldown-mask 元素从 0 度旋转到 360 度。我们将这个动画应用到 .cooldown-mask 元素，并设置 infinite 属性让动画无限循环。

这样，当你将这段代码应用到你的网页中时，你会看到 .cooldown-mask 元素以圆形区域为中心不断旋转，实现了魔兽技能转圈冷却效果。你可以根据需要调整容器的大小、动画的持续时间和其他样式属性