使用CSS动画为HTML元素创建震动效果教程_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用CSS动画为HTML元素创建震动效果教程

2025-11-10

浏览次数：次

返回列表

使用CSS动画为HTML元素创建震动效果教程

本教程详细讲解如何利用css的`@keyframes`规则和`animation`属性，为html元素实现逼真的震动视觉效果。文章将涵盖动画定义、属性配置、以及通过j*ascript动态触发动画的方法，并提供完整的示例代码和注意事项，帮助开发者轻松为网页增添交互性。

1. 理解CSS动画核心：@keyframes与animation

CSS动画主要通过两个核心概念实现：@keyframes规则和animation属性。

@keyframes规则：用于定义动画序列的各个阶段。您可以在其中指定动画在不同时间点（通常以百分比表示，从0%到100%）的CSS属性值。这些属性值之间的过渡将由浏览器平滑地完成。
animation属性：用于将一个或多个@keyframes动画应用到HTML元素上。它是一个简写属性，可以设置动画的名称、持续时间、时间函数、延迟、迭代次数、方向、填充模式和播放状态。

通过组合这两者，我们可以创建从简单的悬停效果到复杂页面过渡的各种动态视觉体验。

2. 定义震动动画序列

震动效果通常涉及元素的微小位移（translate）和旋转（rotate），以模拟不规则的晃动。以下是一个经典的震动效果@keyframes定义：

@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定义中：

我们定义了动画从0%到100%的十一个关键帧。
每个关键帧都使用了transform属性来同时改变元素的translate（位移）和rotate（旋转）值。
translate(x, y) 使元素在水平和垂直方向上移动。
rotate(deg) 使元素旋转指定的角度。
通过在不同百分比处设置微小且不规则的位移和旋转，我们创建了一种随机晃动的视觉效果。

3. 应用动画属性

为了实现可控的震动效果（例如持续3秒），我们需要在CSS中定义一个类，将@keyframes shake动画应用到目标元素上。

.shake-active {
  animation-name: shake; /* 指定要使用的 @keyframes 动画名称 */
  animation-duration: 3s; /* 动画持续时间为3秒 */
  animation-timing-function: ease-in-out; /* 动画速度曲线，可根据需要调整 */
  animation-iteration-count: 1; /* 动画播放次数为1次 */
  animation-fill-mode: forwards; /* 动画结束后保持最后一个关键帧的样式 */
}

/* 示例元素的样式，非震动效果必需 */
#myElement {
  background-color: lightcoral;
  height: 150px;
  width: 150px;
  margin: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  color: white;
  font-weight: bold;
}

animation-name: shake;: 引用我们之前定义的@keyframes shake动画。
animation-duration: 3s;: 设置动画总时长为3秒，满足了3秒最大持续时间的要求。
animation-timing-function: ease-in-out;: 定义动画的速度曲线，这里使用先加速后减速，使震动感觉更自然。
animation-iteration-count: 1;: 确保动画只播放一次。如果需要无限循环，可以设置为infinite。
animation-fill-mode: forwards;: 动画结束后，元素会保持其在动画最后一个关键帧时的样式，而不是立即回到初始状态。这对于一些动画效果可能很重要。

4. 动态触发震动效果

要实现“像函数一样随时调用”震动效果，我们可以结合J*aScript来动态添加和移除包含动画属性的CSS类。

function triggerShake(elementId) {
  const element = document.getElementById(elementId);
  if (element) {
    // 确保在重新添加类之前移除旧的动画类，以允许动画再次播放
    element.classList.remove('shake-active');
    // 强制浏览器重绘以重置动画（通过获取一个属性）
    void element.offsetWidth;
    // 添加类以触发动画
    element.classList.add('shake-active');

    // 动画结束后移除类，以便下次可以再次触发
    // 注意：这里的3000ms应与CSS中的animation-duration匹配
    setTimeout(() => {
      element.classList.remove('shake-active');
    }, 3000);
  }
}

这段J*aScript代码的工作原理：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

277 查看详情火龙果写作

triggerShake(elementId) 函数接收一个元素的ID。
它首先移除shake-active类，这是为了确保如果元素已经在震动或刚震动完，可以重新触发动画。
void element.offsetWidth; 这一行是一个小技巧，强制浏览器重新计算元素的布局，从而“重置”动画状态，使得即使类被立即添加回来，动画也能从头开始播放。
然后，它添加shake-active类，这会立即应用CSS动画并开始震动。
setTimeout 函数在3000毫秒（即动画持续时间）后移除shake-active类。这确保了动画只播放一次，并且元素在动画结束后恢复到没有震动效果的状态，为下一次触发做好准备。

5. 完整示例代码

将HTML、CSS和J*aScript结合起来，形成一个完整的可运行示例：

<!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>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background-color: #f0f2f5;
    }

    /* 震动动画的关键帧定义 */
    @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); }
    }

    /* 应用震动动画的CSS类 */
    .shake-active {
      animation-name: shake;
      animation-duration: 3s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }

    /* 示例元素的样式 */
    #myElement {
      background-color: #4CAF50; /* 绿色背景 */
      height: 150px;
      width: 150px;
      margin: 30px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2em;
      color: white;
      font-weight: bold;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      transition: background-color 0.3s ease; /* 添加过渡效果 */
    }

    #myElement:hover {
        background-color: #45a049; /* 悬停变深 */
    }

    button {
      padding: 10px 20px;
      font-size: 1em;
      cursor: pointer;
      background-color: #008CBA; /* 蓝色按钮 */
      color: white;
      border: none;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #007bb5;
    }
  </style>
</head>
<body>

  <h1>HTML元素震动效果演示</h1>

  <div id="myElement">点击按钮震动我</div>

  <button onclick="triggerShake('myElement')">触发震动</button>

  <script>
    function triggerShake(elementId) {
      const element = document.getElementById(elementId);
      if (element) {
        // 1. 移除旧的动画类，确保动画可以重新播放
        element.classList.remove('shake-active');
        // 2. 强制浏览器重绘以重置动画
        void element.offsetWidth; // 触发回流
        // 3. 添加类以触发动画
        element.classList.add('shake-active');

        // 4. 动画结束后移除类，以便下次可以再次触发
        // 这里的3000ms应与CSS中的animation-duration匹配
        setTimeout(() => {
          element.classList.remove('shake-active');
        }, 3000);
      }
    }
  </script>

</body>
</html>

6. 拓展与注意事项

全屏震动效果

如果目标是让整个HTML窗口看起来震动，可以将shake-active类应用到

元素，或者创建一个覆盖整个视口的div并对其应用动画。

/* 应用于body的全屏震动 */
body.shake-active {
  animation-name: shake;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

然后通过J*aScript document.body.classList.add('shake-active'); 来触发。

性能考量

CSS transform属性（包括translate和rotate）的动画通常是高性能的，因为它们可以通过GPU加速。这意味着它们不会引起布局或绘制的重排，从而提供更流畅的动画体验。避免对width, height, margin, padding等属性进行动画，这些属性会触发昂贵的布局计算。

用户体验与无障碍性

适度使用：震动效果应谨慎使用，过度或频繁的震动可能会分散用户注意力，甚至引起不适。
提供控制：对于长时间或剧烈的动画，考虑提供一个选项让用户可以停止或禁用动画，特别是对于有前庭系统敏感性或运动障碍的用户。
媒体查询：可以使用@media (prefers-reduced-motion)媒体查询来检测用户是否偏好减少动画，并相应地调整或禁用震动效果。

动画持续时间与迭代

animation-duration：根据所需效果调整动画持续时间。较短的时间会产生更急促的震动，较长的时间则更平缓。
animation-iteration-count：设置为1表示播放一次，设置为infinite表示无限循环。通过J*aScript动态控制类，可以灵活实现单次播放或多次播放。

7. 总结

通过本教程，您已经掌握了如何使用CSS的@keyframes规则和animation属性来创建HTML元素的震动效果，并学会了如何结合J*aScript动态地触发和控制这些动画。这种方法不仅功能强大，而且性能优异，是为网页添加丰富交互性和视觉反馈的有效手段。在实际应用中，请务必考虑用户体验和无障碍性，以提供最佳的浏览体验。

以上就是使用CSS动画为HTML元素创建震动效果教程的详细内容，更多请关注其它相关文章！

# 设置为 # 潜江农业seo推广公司排名 # 视频号营销推广文案模板 # 甘南网站推广营销怎么做 # 瑶海区推广系统招聘网站 # 新疆建设银行网站 # 昭通seo培训好吗 # seo优化网站如何 # seo术语目录全文 # 蚂蚁搬家seo工资 # 商业广告推广网站推荐 # 无障碍 # 应与 # 如何实现 # 全屏 # 我们可以 # css # 是一个 # 结束后 # 持续时间 # 移除 # re # 重绘 # 回流 # css属性 # html元素 # css动画 # ssl # 浏览器 # html # java # javascript