用CSS3写一个技能冷却的动画

下面是一个使用CSS3实现的技能冷却动画的示例：

HTML代码：

<div class="cooldown">
  <div class="cooldown-overlay"></div>
  <div class="cooldown-text">10s</div>
</div>

CSS代码：

.cooldown {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ccc;
  overflow: hidden;
}

.cooldown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f00;
  opacity: 0;
  transition: opacity 1s;
}

.cooldown-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #fff;
}

.cooldown:hover .cooldown-overlay {
  opacity: 0.5;
}

.cooldown:hover .cooldown-text {
  color: #000;
}

在上面的示例中，.cooldown类表示技能冷却的容器，它是一个圆形的div。.cooldown-overlay类是一个覆盖在容器上方的div，它的背景色代表技能的冷却状态。.cooldown-text类表示显示技能剩余冷却时间的文本。

当鼠标悬停在.cooldown容器上时，.cooldown-overlay的透明度会变为0.5，表示技能正在冷却中。此时，.cooldown-text的颜色也会改变，以提醒用户技能正在冷却。

你可以根据自己的需求调整容器的大小、颜色和文本样式等