利用transition实现文字上下抖动的效果-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们常常需要为网站或应用程序添加一些动态效果来提升用户体验。今天，我将向您展示如何使用 CSS 的 transition 属性来创建一个简单但有趣的文字上下抖动动画效果。

前置条件

在本文中，我们将使用 HTML 和 CSS 来创建这个效果。因此，您应该具备基本的 HTML 和 CSS 编程知识。

实现步骤

第 1 步：HTML 结构

首先，我们需要在 HTML 中设置一个 div 元素来包含我们要显示的文本，并为它指定一个类：

<div class="shake-text">Hello, World!</div>

第 2 步：CSS 样式

接下来，我们需要为 .shake-text 类添加样式。我们将使用以下 CSS 属性来实现上下抖动效果：

position: relative;：指定元素的位置为相对定位。
top: 0;：指定元素距离顶部的初始位置。
transition: top 0.3s ease-in-out;：指定 top 属性的过渡效果，持续时间为 0.3 秒，缓动函数为 ease-in-out。

代码如下：

.shake-text {
  position: relative;
  top: 0;
  transition: top 0.3s ease-in-out;
}

第 3 步：JavaScript 代码

最后，我们需要使用 JavaScript 来触发动画效果。我们将为 .shake-text 元素添加一个名为 shake 的类，并在一定时间后再将其删除。这将触发 top 属性的过渡效果并创建上下抖动效果。

以下是实现此目的的 JavaScript 代码：

const shakeText = document.querySelector('.shake-text');
setTimeout(() => {
  shakeText.classList.add('shake');
  setTimeout(() => {
    shakeText.classList.remove('shake');
  }, 500);
}, 1000);

在这里，我们首先使用 document.querySelector() 方法获取 .shake-text 元素的引用。然后，我们使用 setTimeout() 方法等待一段时间后执行 shakeText 元素的添加和删除类操作。

示例代码

下面是完整的示例代码：

-- -------------------- ---- -------
--------- -----
----- ----------
------
  ----- ----------------
  ------------ ---- --------------
  -------
    ----------- -
      --------- ---------
      ---- --
      ----------- --- ---- ------------
    -
    
    ------ -
      ---- ------
    -
  --------
-------
------
  ---- ------------------------- ------------
  --------
    ----- --------- - --------------------------------------
    ------------- -- -
      ---------------------------------
      ------------- -- -
        ------------------------------------
      -- -----
    -- ------
  ---------
-------
-------

总结

在本文中，我们学习了如何使用 CSS 的 transition 属性来创建一个简单但有趣的文字上下抖动效果。通过添加适当的样式和 JavaScript 代码，我们可以为网站或应用程序增加一些动态效果，从而提升用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/925