CSS动画实现HTML元素抖动效果教程-html教程-PHP中文网

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

本教程详细介绍了如何利用css的`@keyframes`和`animation`属性为html元素创建逼真的抖动效果。文章不仅涵盖了抖动动画的css定义、持续时间、重复次数等控制方法，更深入探讨了如何通过javascript动态添加/移除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>

登录后复制

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

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

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

步骤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：使用JavaScript动态添加/移除CSS类

接下来，我们使用JavaScript来控制这个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>

登录后复制

在上述JavaScript代码中：

我们获取了目标div元素和触发按钮。
为按钮添加了一个点击事件监听器。
当按钮被点击时，我们首先检查myDiv是否已经包含is-shaking类，以防止动画在进行中被重复触发。
如果不在抖动，就通过myDiv.classList.add('is-shaking')添加该类，从而启动CSS动画。
使用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;
}

登录后复制

// JavaScript
const pageWrapper = document.getElementById('page-wrapper');
// ... 像上面一样控制 pageWrapper 的 class

登录后复制

注意事项与最佳实践

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

总结

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

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