css 如何做出震颤效果

要在CSS中实现震颤效果，可以使用@keyframes动画和transform属性来创建。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes shake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-10px, 0); }
  20% { transform: translate(10px, 0); }
  30% { transform: translate(-10px, 0); }
  40% { transform: translate(10px, 0); }
  50% { transform: translate(-10px, 0); }
  60% { transform: translate(10px, 0); }
  70% { transform: translate(-10px, 0); }
  80% { transform: translate(10px, 0); }
  90% { transform: translate(-10px, 0); }
  100% { transform: translate(0, 0); }
}

.shake-element {
  animation: shake 0.5s infinite;
}
</style>
</head>
<body>

<div class="shake-element">这是一个震颤的元素</div>

</body>
</html>

在这个示例中，我们创建了一个名为shake的@keyframes动画，它通过改变transform属性的translate值来实现震颤效果。然后，我们将这个动画应用于一个具有.shake-element类的元素上，并设置动画持续时间为0.5秒，并且无限循环。

你可以根据需要调整动画的持续时间，以及@keyframes中定义的动画帧的百分比和变换值来创建不同的震颤效果