浏览器游戏Hint按钮60秒倒计时CSS逆时针时钟效果开发求助

可以通过HTML+CSS+JavaScript组合实现你需要的效果：用遮罩层的逆时针旋转动画展示倒计时进度，同时控制按钮的可点击状态。

核心实现代码 #

HTML结构 #

<button id="hintBtn" disabled>Hint</button>

CSS样式 #

#hintBtn {
  position: relative;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  background: #4CAF50;
  color: white;
  cursor: not-allowed;
  opacity: 0.6;
  overflow: hidden;
}

#hintBtn::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #ccc;
  transform-origin: top right;
  animation: countdownRotate 60s linear forwards;
}

#hintBtn:not(:disabled) {
  cursor: pointer;
  opacity: 1;
}

#hintBtn:not(:disabled)::after {
  display: none;
}

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

JavaScript逻辑 #

const hintBtn = document.getElementById('hintBtn');

// 60秒后启用按钮
setTimeout(() => {
  hintBtn.removeAttribute('disabled');
}, 60000);

效果说明 #

• 按钮初始处于禁用状态，鼠标样式为not-allowed，透明度降低
• 按钮上层的伪元素作为遮罩，从右上角（对应12点位置）开始逆时针旋转60秒，完全旋转一周后动画结束
• 60秒倒计时结束后，移除按钮的disabled属性，同时隐藏遮罩伪元素，按钮恢复可点击状态

内容的提问来源于stack exchange，提问作者RomainP