如何設置CSS點擊按鈕抖動

在CSS中，我們可以通過使用動畫（animation）和過渡（transition）來實現(xiàn)點擊按鈕時的抖動效果，以下是一個簡單的示例：

1、我們需要創(chuàng)建一個HTML按鈕：

<button id="myButton">點擊我！</button>

2、在CSS中，我們可以定義一個動畫來描述抖動的動作：

@keyframes shake {
    0% { transform: translateX(0); }
    10% { transform: translateX(-5px); }
    20% { transform: translateX(5px); }
    30% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    50% { transform: translateX(-5px); }
    60% { transform: translateX(5px); }
    70% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
    90% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

3、我們將這個動畫應用到按鈕上，并設置過渡效果：

#myButton {
    transition: all 0.3s ease; /* 設置過渡效果 */
}
#myButton:active {
    animation: shake 0.3s; /* 設置抖動動畫 */
}

在這個示例中，我們定義了一個名為“shake”的動畫，該動畫描述了按鈕從中心位置開始，左右抖動的動作，我們將這個動畫應用到按鈕上，并在點擊按鈕時觸發(fā)該動畫，我們還設置了一個過渡效果，使得按鈕在抖動過程中更加平滑。