html图片抖动代码

实现原理

通过CSS动画（@keyframes）控制图片在水平和垂直方向上的微小位移，模拟抖动效果，核心是定义关键帧动画,让图片在一定时间内反复偏移并回归原位。

代码实现

HTML结构

<div class="shake-container">
  <img src="image.jpg" alt="抖动图片" class="shake-image">
</div>

CSS样式

/ 1. 定义抖动动画 /
@keyframes shake {
  0% { transform: translate(0, 0); }  / 初始位置 /
  25% { transform: translate(-5px, -5px); }  / 左上偏移 /
  50% { transform: translate(5px, -5px); }   / 右上偏移 /
  75% { transform: translate(-5px, 5px); }   / 左下偏移 /
  100% { transform: translate(5px, 5px); }   / 右下偏移 /
}
/ 2. 应用动画到图片 /
.shake-image {
  width: 300px; / 图片宽度 /
  animation: shake 0.5s infinite; / 无限循环，0.5秒完成一次抖动 /
}

参数说明表

效果预览

!抖动效果示意图
注：实际效果为图片持续小幅抖动，类似“震动”视觉反馈。

相关问题与解答

问题1：如何改变抖动方向（仅水平或垂直）？

解答：
修改@keyframes中的translate()值，

• 水平抖动：保留x轴偏移，移除y轴值

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

• 垂直抖动：仅保留y轴偏移

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

问题2：如何让抖动效果只触发一次？

解答：
将animation属性的infinite改为1，并添加forwards保持最终状态：

.shake-image {
  animation: shake 0.5s 1 forwards; / 仅播放一次 /