css制作动态摇晃

使用 CSS 动画实现动态摇晃效果

通过 @keyframes 定义摇晃动画，结合 transform 属性实现左右摇摆效果。以下是一个基础示例：

.shake {
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

增强真实感的缓动效果

添加 cubic-bezier 时间函数模拟物理惯性，使动画更自然：

.shake {
  animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) infinite;
  transform-origin: center bottom;
}

3D 空间摇晃效果

结合 rotateY 和 perspective 实现立体感摇晃：

.shake-3d {
  perspective: 1000px;
  animation: shake3d 1s infinite;
}

@keyframes shake3d {
  10%, 90% { transform: rotateY(-3deg); }
  20%, 80% { transform: rotateY(5deg); }
  30%, 50%, 70% { transform: rotateY(-7deg); }
  40%, 60% { transform: rotateY(7deg); }
}

悬停触发摇晃

通过 :hover 伪类实现交互式效果：

.btn-hover {
  transition: transform 0.2s;
}

.btn-hover:hover {
  animation: shake 0.3s;
}

关键参数调整指南

• 幅度控制：修改 translateX 或 rotate 的像素/角度值
• 速度控制：调整 animation-duration 时间（单位秒）
• 摇摆次数：改变 infinite 为具体数字（如 3）
• 延迟启动：添加 animation-delay 属性

以上方法可根据实际需求组合使用，通过调整关键帧百分比和变形参数实现不同强度的摇晃效果。