css制作动态摇晃

使用 CSS 动画实现摇晃效果

通过 @keyframes 定义动画关键帧，结合 transform 属性实现左右摇晃效果。以下代码示例展示了一个简单的摇晃动画：

.shake {
  animation: shake 0.5s ease-in-out infinite;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

调整摇晃幅度和频率

修改 translateX 的像素值和动画持续时间可以改变摇晃的幅度和速度：

.vigorous-shake {
  animation: vigorousShake 0.3s linear infinite;
}

@keyframes vigorousShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
}

添加旋转效果增强动态感

结合 rotate 属性可以让摇晃效果更生动：

.rotate-shake {
  animation: rotateShake 0.8s ease infinite;
}

@keyframes rotateShake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

使用 CSS 变量控制参数

通过 CSS 变量实现参数化控制，方便调整效果：

:root {
  --shake-intensity: 8px;
  --shake-duration: 0.4s;
}

.custom-shake {
  animation: customShake var(--shake-duration) infinite;
}

@keyframes customShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(calc(-1 * var(--shake-intensity))); }
  40%, 80% { transform: translateX(var(--shake-intensity)); }
}

实现悬停触发摇晃

通过 :hover 伪类实现鼠标悬停时触发动画：

.hover-shake {
  transition: transform 0.3s ease;
}

.hover-shake:hover {
  animation: shake 0.5s ease-in-out;
}