CSS實(shí)現(xiàn)顫抖效果的方法

在CSS中，我們可以使用@keyframes規(guī)則來創(chuàng)建動畫，從而實(shí)現(xiàn)顫抖效果，以下是一個簡單的例子：

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 1px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(1deg); }
  80% { transform: translate(-1px, -1px) rotate(-1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

在這個例子中，我們定義了一個名為shake的動畫，它會在元素上產(chǎn)生顫抖效果，在動畫的每一個關(guān)鍵幀，我們都會改變元素的transform屬性，從而實(shí)現(xiàn)顫抖效果，我們將這個動畫應(yīng)用到.shake類上，并設(shè)置hover偽類來觸發(fā)動畫。

這只是一個簡單的例子，你可以根據(jù)自己的需求來調(diào)整動畫的關(guān)鍵幀和持續(xù)時(shí)間，你也可以使用其他CSS屬性來實(shí)現(xiàn)更豐富的顫抖效果，希望這個例子能對你有所幫助！