使用CSS和JavaScript实现HTML元素抖动效果教程-html教程-PHP中文网

使用CSS和JavaScript实现HTML元素抖动效果教程

聖光之護

发布： 2025-11-06 13:33:19

原创

338人浏览过

使用css和javascript实现html元素抖动效果教程

本教程详细介绍了如何利用CSS的@keyframes和animation属性为HTML元素创建视觉上的抖动效果。文章不仅涵盖了抖动动画的定义与应用，还进一步讲解了如何通过JavaScript动态触发和控制动画的持续时间，实现类似“函数调用”的灵活交互，并提供了完整的代码示例和实践建议。

1. 理解抖动效果的需求与原理

在用户界面设计中，抖动效果常用于吸引用户注意、表示错误输入或突出显示特定元素。实现这种效果的核心是利用CSS的动画能力，通过在短时间内快速改变元素的位置和旋转角度来模拟抖动。

CSS动画主要依赖两个关键部分：

@keyframes 规则：定义动画的各个阶段（关键帧），指定元素在不同时间点的样式。
animation 属性：将定义的@keyframes动画应用到HTML元素上，并控制动画的播放方式（如持续时间、重复次数、延迟等）。

2. 定义抖动动画：@keyframes

首先，我们需要定义一个名为shake的@keyframes规则。这个规则将指定元素在动画周期内如何进行位移（translate）和旋转（rotate），从而产生抖动感。

立即学习“Java免费学习笔记（深入）”；

@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, 2px) 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); }
}

登录后复制

代码解析：

@keyframes shake：定义了一个名为shake的动画。
0%到100%：表示动画从开始到结束的进度。
transform: translate(x, y) rotate(angle)：
- translate(x, y)：使元素在X轴和Y轴上移动指定的像素。通过在不同百分比处设置不同的x和y值，模拟随机的位移。
- rotate(angle)：使元素旋转指定的角度。通过在不同百分比处设置正负角度，增加抖动的真实感。

这个@keyframes定义了一个0.5秒的快速抖动循环。

3. 应用动画到HTML元素

要将上述定义的shake动画应用到特定的HTML元素上，我们可以创建一个CSS类。这个类将包含animation属性，用于指定动画的名称、持续时间、重复次数等。

开拍

用AI制作口播视频

289

查看详情

/* 示例元素的基础样式 */
#myDiv {
  background-color: #007bff;
  color: white;
  height: 100px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto;
  border-radius: 5px;
  font-family: sans-serif;
}

/* 包含抖动动画的CSS类 */
.shake-active {
  /* 应用shake动画，每次循环0.1秒，重复30次，总计3秒 */
  animation: shake 0.1s 30; 
  /* 动画结束后保持最终状态，或直接移除类以恢复 */
  /* animation-fill-mode: forwards; */ 
}

登录后复制

animation属性详解：

animation-name: shake，指定要播放的@keyframes动画名称。
animation-duration: 0.1s，指定动画一个循环的持续时间。这里我们把单个抖动周期设置得很短，以实现更快的抖动频率。
animation-iteration-count: 30，指定动画的重复次数。由于单个抖动周期是0.1秒，重复30次将使整个抖动效果持续3秒（0.1s * 30 = 3s），符合“持续约3秒”的需求。
animation-fill-mode: forwards（可选），动画结束后，元素将保持其动画结束时的样式。如果希望动画结束后元素恢复原样，则可以省略此属性，或在JavaScript中移除shake-active类。

4. HTML结构示例

为了演示，我们创建一个简单的HTML页面，包含一个用于触发抖动的按钮和一个将要抖动的div元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML元素抖动效果</title>
  <style>
    /* 将上述CSS代码粘贴到这里 */
    #myDiv {
      background-color: #007bff;
      color: white;
      height: 100px;
      width: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 50px auto;
      border-radius: 5px;
      font-family: sans-serif;
      font-size: 1.2em;
    }

    .shake-active {
      animation: shake 0.1s 30; /* 0.1秒一个循环，重复30次，总计3秒 */
    }

    @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, 2px) 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); }
    }

    button {
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      font-size: 1em;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div id="myDiv">我将抖动！</div>
  <button id="shakeButton">点击我抖动</button>

  <script>
    // JavaScript代码将在此处添加
  </script>
</body>
</html>

登录后复制

5. 动态触发抖动效果（模拟“调用函数”）

CSS动画本身是声明式的，不能像JavaScript函数一样直接“调用”。但我们可以通过JavaScript动态地添加或移除包含动画定义的CSS类来模拟这种“调用”行为。

为了实现“持续约3秒”并自动停止，我们将利用JavaScript监听动画结束事件。

const myDiv = document.getElementById('myDiv');
const shakeButton = document.getElementById('shakeButton');

shakeButton.addEventListener('click', () => {
  // 确保在添加新动画前移除旧的类，防止重复触发导致问题
  myDiv.classList.remove('shake-active'); 
  // 强制浏览器重绘，以便动画能重新开始
  void myDiv.offsetWidth; 

  // 添加 shake-active 类来触发抖动动画
  myDiv.classList.add('shake-active');
});

// 监听动画结束事件
myDiv.addEventListener('animationend', (event) => {
  // 确保只处理我们定义的shake动画
  if (event.animationName === 'shake') {
    // 动画结束后移除 shake-active 类，使元素恢复原样
    myDiv.classList.remove('shake-active');
  }
});

登录后复制

JavaScript代码解析：

获取DOM元素：通过document.getElementById获取div和button元素。
按钮点击事件监听：当点击shakeButton时，执行以下操作：
- myDiv.classList.remove('shake-active')：在每次触发前，先移除shake-active类。这很重要，因为如果类已经存在，再次添加它可能不会重新触发动画。
- void myDiv.offsetWidth;：这是一个小技巧，强制浏览器进行重绘（reflow）。在移除类后立即添加类，浏览器可能优化掉中间的渲染步骤，导致动画不重新播放。强制重绘可以确保动画能够从头开始。
- myDiv.classList.add('shake-active')：将shake-active类添加到myDiv上，从而应用抖动动画。
动画结束事件监听：
- myDiv.addEventListener('animationend', ...)：监听myDiv上的animationend事件。当任何CSS动画完成一个循环或完全结束时，都会触发此事件。
- if (event.animationName === 'shake')：确保我们只处理名为shake的动画结束事件，避免影响其他可能的动画。
- myDiv.classList.remove('shake-active')：动画结束后，移除shake-active类。这样，元素将停止抖动并恢复其原始状态，等待下一次触发。

6. 注意事项与最佳实践

性能考量：transform属性的动画通常由GPU加速，性能较好。但过度频繁或在大量元素上同时使用复杂动画仍可能影响页面性能。
用户体验与无障碍性：
- 抖动动画可能对某些用户（如患有前庭疾病或对运动敏感的用户）造成不适。
- 避免过度使用，仅在必要时（如错误提示）使用。
- 考虑为用户提供关闭动画的选项，或通过CSS媒体查询@media (prefers-reduced-motion)来提供简化的体验。
浏览器兼容性：@keyframes和animation属性在现代浏览器中支持良好。对于旧版浏览器，可能需要添加供应商前缀（如-webkit-），但现在通常不再是必需。
动画持续时间与频率：根据实际需求调整animation-duration和animation-iteration-count。快速、短促的抖动（如0.1s循环）配合多次重复，通常比慢速、长时间的单次抖动效果更佳。
动画库：对于更复杂或需要更精细控制的动画，可以考虑使用现有的JavaScript动画库（如GSAP、Anime.js）或CSS动画库（如Animate.css）。