新闻中心

CSS动画实现HTML元素抖动效果教程

2025-11-07
浏览次数：次
返回列表

CSS动画实现HTML元素抖动效果教程

本教程详细介绍了如何利用css的`@keyframes`和`animation`属性为html元素创建逼真的抖动效果。文章不仅涵盖了抖动动画的css定义、持续时间、重复次数等控制方法，更深入探讨了如何通过j*ascript动态添加/移除css类，实现“函数式”按需触发抖动效果，并提供了完整的代码示例和最佳实践建议。

理解CSS动画与抖动效果

在网页开发中，CSS动画是实现各种动态视觉效果的强大工具。抖动效果（Shake Animation）通过快速、小幅度的位移和旋转，模拟物体受到冲击或震动时的状态。要实现这种效果，我们主要依赖CSS的@keyframes规则来定义动画的各个阶段，以及animation属性来控制动画的播放方式。

核心原理：CSS @keyframes 定义抖动

@keyframes规则允许我们定义动画在不同时间点的样式。对于抖动效果，我们会在动画的0%到100%之间，通过transform属性不断改变元素的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中：

  • 0%到100%代表动画的整个时间线。
  • transform: translate(x, y)用于使元素在水平和垂直方向上进行小幅度的位移。
  • transform: rotate(deg)用于使元素进行小幅度的旋转。 通过组合这些微小的、不规则的变化，即可形成视觉上的抖动效果。

应用动画到HTML元素

定义好@keyframes后，我们需要使用animation属性将其应用到目标HTML元素上。animation是一个简写属性，可以同时设置多个动画相关的子属性，包括：

  • animation-name: 指定要播放的@keyframes名称（例如shake）。
  • animation-duration: 动画持续时间（例如0.5s表示0.5秒）。
  • animation-timing-function: 动画的缓动函数（例如ease-in-out）。
  • animation-delay: 动画开始前的延迟时间。
  • animation-iteration-count: 动画播放次数（例如infinite无限次，或具体数字）。
  • animation-direction: 动画是否应该轮流反向播放。
  • animation-fill-mode: 动画结束后或开始前的状态。

基础示例：持续抖动

为了演示抖动效果，我们可以创建一个简单的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>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }

    #myDiv {
      background-color: #3498db;
      height: 150px;
      width: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 1.2em;
      font-family: sans-serif;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

      /* 应用抖动动画 */
      animation: shake 0.5s infinite; /* 动画名称 shake, 持续0.5秒, 无限次重复 */
    }

    @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); }
    }
  </style>
</head>
<body>
  <div id="myDiv">我正在抖动！</div>
</body>
</html>

动态触发抖动效果（“函数式调用”）

在实际应用中，我们通常需要根据用户的交互或其他事件来触发抖动，而不是让它一直抖动。这类似于“调用一个函数”来执行抖动。实现这一目标最常用的方法是结合J*aScript和CSS类。

火龙果写作 火龙果写作

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

火龙果写作 277 查看详情 火龙果写作

步骤1：定义一个包含动画的CSS类

首先，创建一个CSS类（例如is-shaking），它只在需要抖动时才被应用。我们将动画的持续时间设置为3秒，并只播放一次。

/* ... (之前的 @keyframes shake 保持不变) ... */

.is-shaking {
  animation: shake 0.1s ease-in-out 0s 30; /* 0.1s 持续时间，重复30次 = 3秒 */
  /* 或者更精确地控制总时长，例如 */
  /* animation: shake 3s forwards; */ /* 3秒总时长，动画结束后停留在最终状态 */
}

注意：

  • animation: shake 0.1s ease-in-out 0s 30; 意味着每次抖动周期是0.1秒，重复30次，总共持续3秒。
  • animation: shake 3s forwards; 意味着整个抖动动画持续3秒，并且forwards会使元素在动画结束后保持最后一帧的样式。选择哪种方式取决于你希望抖动是快速重复还是平滑过渡。为了更接近真实的“抖动”，通常选择快速重复小周期。

步骤2：使用J*aScript动态添加/移除CSS类

接下来，我们使用J*aScript来控制这个is-shaking类的添加和移除。

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

    #myDiv {
      background-color: #3498db;
      height: 150px;
      width: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 1.2em;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      margin-bottom: 20px;
      transition: transform 0.05s ease-out; /* 添加一个小的过渡，让抖动停止时更自然 */
    }

    button {
      padding: 10px 20px;
      font-size: 1em;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #218838;
    }

    /* 抖动动画的 @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); }
    }

    /* 触发抖动效果的CSS类 */
    .is-shaking {
      animation: shake 0.1s ease-in-out 0s 30; /* 0.1秒一个周期，重复30次，总计3秒 */
    }
  </style>
</head>
<body>
  <div id="myDiv">点击按钮抖动我</div>
  <button id="shakeButton">开始抖动 (3秒)</button>

  <script>
    const myDiv = document.getElementById('myDiv');
    const shakeButton = document.getElementById('shakeButton');
    const shakeDuration = 3000; // 抖动持续时间，单位毫秒 (3秒)

    shakeButton.addEventListener('click', () => {
      // 检查是否已经在抖动，避免重复触发
      if (!myDiv.classList.contains('is-shaking')) {
        myDiv.classList.add('is-shaking'); // 添加抖动类

        // 在指定时间后移除抖动类，停止动画
        setTimeout(() => {
          myDiv.classList.remove('is-shaking');
        }, shakeDuration);
      }
    });
  </script>
</body>
</html>

在上述J*aScript代码中：

  1. 我们获取了目标div元素和触发按钮。
  2. 为按钮添加了一个点击事件监听器。
  3. 当按钮被点击时，我们首先检查myDiv是否已经包含is-shaking类，以防止动画在进行中被重复触发。
  4. 如果不在抖动，就通过myDiv.classList.add('is-shaking')添加该类，从而启动CSS动画。
  5. 使用setTimeout函数，在shakeDuration（3000毫秒，即3秒）后，通过myDiv.classList.remove('is-shaking')移除该类，停止抖动动画。

抖动整个窗口

如果需要让整个HTML窗口（或页面内容）抖动，可以将is-shaking类应用到body元素或一个包裹了所有页面内容的顶级div上。例如：

<!-- HTML 结构 -->
<body>
  <div id="page-wrapper">
    <!-- 页面所有内容 -->
  </div>
</body>
/* CSS */
#page-wrapper {
  /* 确保它占据整个视口 */
  min-height: 100vh;
  width: 100vw;
  /* 其他样式 */
}

#page-wrapper.is-shaking {
  animation: shake 0.1s ease-in-out 0s 30;
}
// J*aScript
const pageWrapper = document.getElementById('page-wrapper');
// ... 像上面一样控制 pageWrapper 的 class

注意事项与最佳实践

  1. 性能优化： 在CSS动画中，使用transform属性（如translate、rotate、scale）通常比改变top、left、margin等属性具有更好的性能，因为它能利用GPU加速。本教程的抖动效果正是基于transform。
  2. 用户体验： 抖动效果可能会对某些用户造成不适，特别是那些对运动敏感或有前庭系统障碍的用户。应谨慎使用，并考虑提供关闭动画的选项，或者仅在特定、非关键的交互中使用。
  3. 动画时长与频率： 抖动效果不宜过长或过于频繁。3秒是一个相对合理的持续时间。过长的抖动会分散用户注意力，甚至引起烦躁。
  4. 目标选择： 确定抖动的目标是特定元素、容器还是整个页面。对整个页面进行抖动应特别小心，因为它会影响所有内容的可读性。
  5. 浏览器兼容性： 现代浏览器对CSS @keyframes和animation的支持非常好，但在非常老的浏览器中可能需要添加浏览器前缀（如-webkit-），不过现在已不常见。

总结

通过本教程，我们学习了如何利用CSS的@keyframes定义复杂的抖动动画，并使用animation属性将其应用到HTML元素。更重要的是，我们掌握了如何结合J*aScript，通过动态添加和移除CSS类的方式，实现按需、可控地触发抖动效果，这使得动画在用户交互中变得更加灵活和实用。在实际开发中，请务必权衡动画的视觉效果与用户体验，确保其能为产品增色而非造成干扰。

以上就是CSS动画实现HTML元素抖动效果教程的详细内容，更多请关注其它相关文章！


# javascript  # css  # 点击事件  # css动画  # ai  # ssl  # 工具  # app  # 浏览器  # html  # java  # 玉溪小红书营销推广工作室  # 蚌埠抖音seo厂家  # 云城网站收录优化  # 工业产品推广网站  # 小白酒推广营销策划方案  # 宁夏seo软件哪家好  # ipo seo 再次发行间隔  # 驻马店网站推广与优化  # 西平网站推广费用多少  # 如何找品牌行情网站推广  # 按需  # 如何实现  # 创建一个  # 所有内容  # 结束后  # 将其  # 时长  # 是一个  # 持续时间  # 移除  # html元素 


相关栏目： 【 科技资讯46185 】 【 网络学院92790 】


相关推荐： “在文档元素之后找到了标记”是什么错误？ 检查并修复XML中多个根元素的3个方法  汽水音乐网页版使用入口_汽水音乐电脑版播放指南  c++20的std::jthread是什么_c++可中断线程与RAII式管理  Win11怎么开启省电模式_Win11电池节电模式自动开启  神庙逃亡小游戏在线玩 神庙逃亡小游戏入口  新三国志曹操传110级星符试炼夏侯渊极难攻略  TypeScript/J*aScript：高效查找数组中首个唯一ID对象  怎么在mac上运行html代码_mac运行html代码方法【指南】  星露谷物语官网入口 星露谷物语游戏官网入口  C++ vector二维数组定义_C++ vector of vector用法  在J*a中如何隐藏复杂性_使用门面模式组织对象交互  qq邮箱发邮件给国外发不出去_QQ邮箱国际邮件发送失败原因与解决  J*aScript map 方法中处理循环元素为空数组的策略  漫蛙2在线漫画入口 漫蛙正版漫画网页版直达  Win11如何开启讲述人功能 Win11屏幕阅读器（讲述人）开启与关闭【教程】  支付宝如何管理隐私设置_支付宝隐私保护的配置技巧  智慧团建扫码登录入口 智慧团建扫码登录入口官网版​  使用J*aScript检测输入元素是否包含在特定类中  漫蛙网页登录入口 漫蛙漫画官方授权网址  Excel中VLOOKUP的第四个参数是干什么用的_Excel VLOOKUP第四参数作用解析  J*aScript实现单选按钮与关联输入框的联动禁用教程  向日葵客户端怎么进行远程CentOS控制_向日葵客户端远程CentOS控制操作教程  处理Kafka消费者会话超时：深入理解消息处理语义与幂等性  抖音网页版快捷访问 抖音网页版网页版入口操作教程  AO3最新入口2025公告_AO3中文官网合集  在J*aScript中复现SciPy的B样条拟合与求值：关键考量  Go语言中的*string：深入理解字符串指针  抖音隐秘迷城小游戏入口_ 抖音冒险解谜小游戏秒玩  msn官网入口地址手机版 msn官方网站手机最新链接  在Socket.IO连接中实现Access Token自动更新与动态重连  c++如何使用TBB库进行任务并行_c++ Intel线程构建模块  深入理解J*aScript中的B样条曲线与节点向量生成  mysql密码锁定怎么解锁_mysql密码锁定解锁后修改密码步骤  我的世界mc.js免费游戏直接能玩 我的世界mc.js小游戏免费秒玩入口  C++如何实现线程池_C++11手动实现一个简单的固定大小线程池  解决J*aScript中重复选择项的确认对话框显示问题  一加手机拍照效果不好怎么办 一加哈苏影像调校与专业模式使用教程【高手篇】  Animex动漫社网入口地址 Animex动漫社网正版在线入口  126邮箱网页版官方入口 126邮箱账号在线登录平台  如何在Promise链中有效终止错误处理后的执行  优化 Python 函数中的条件逻辑：解决 if-else 嵌套与参数选择问题  树莓派传感器触发：通过Twilio API发送WhatsApp消息教程  sublime怎么设置启动时打开的窗口_sublime会话管理与热退出  Go语言中对Map值调用带指针接收者方法：原理与最佳实践  Golang如何通过reflect操作map_Golang reflect map操作与遍历技巧  如何使用spryker/configurable-bundles-products-resource-relationship模块解决复杂产品捆绑关系难题  支付宝碰一碰设备是REDMI手机吗 博主拆机辟谣：处理器、内存都不一样  动漫花园资源网使用步骤_动漫花园资源网下载流程  J*aScript DOM操作：高效清空列表元素的策略与实践  Win11怎么关闭触摸屏_Windows 11禁用HID符合标准触摸屏 

上一篇：J*aScript setTimeout 实现元素类名定时增删教程
下一篇：在HTML表单提交后同页显示J*aScript结果

搜索