CSS按鈕實現(xiàn)變色閃爍的方法

在CSS中，我們可以使用動畫（@keyframes）來實現(xiàn)按鈕的變色閃爍效果，以下是一個簡單的示例，展示了如何創(chuàng)建一個從紅色變?yōu)榫G色的圓形按鈕，并在按下時產生變色閃爍效果：

HTML代碼：

<div class="circle-button">
  <div class="circle"></div>
</div>

CSS代碼：

.circle-button {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 100px;
  font-size: 24px;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s;
}
.circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: green;
  animation: circle-animation 2s infinite;
}
@keyframes circle-animation {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

在這個示例中，我們使用了兩個關鍵幀（from和to）來創(chuàng)建動畫，在from狀態(tài)，圓形按鈕的縮放比例為0，而在to狀態(tài)，縮放比例為1，這樣，當按下按鈕時，圓形按鈕就會從紅色變?yōu)榫G色，并在按下時產生變色閃爍效果。