使用 HTML 和 CSS 的橡皮筋文本动画

简介

橡皮筋文本动画是一种使用 HTML 和 CSS 制作一个文本在超出容器大小时会有类似于橡皮筋的弹性效果的动画。这种动画可以为你的网站增加一些动态效果，让用户感觉更加生动有趣。

实现步骤

以下是实现该动画的步骤：

1. 创建一个具有一定宽度和高度的容器。

<div class="container"></div>

2. 在容器中创建文本内容。

<div class="container">
  <h1>Hello, World!</h1>
</div>

3. 使用 CSS 中的 @keyframes 和 animation 属性来定义动画效果。

@keyframes stretchy-text {
  0% {
    width: 100%;
  }
  50% {
    width: 120%;
  }
  100% {
    width: 100%;
  }
}

.container h1 {
  animation: stretchy-text 1.5s ease-in-out infinite;
}

上述代码中，@keyframes stretchy-text 定义了动画的效果。通过 animation 属性将其应用到了 .container h1 元素上，并指定了动画持续时间 1.5s、缓动函数 ease-in-out 和无限循环。

4. 使用 overflow: hidden 属性来隐藏超出容器大小的内容，以呈现出橡皮筋弹性效果。

.container {
  width: 400px;
  height: 100px;
  border: 1px solid black;
  overflow: hidden;
}

实现效果

下面是实现的效果展示。

<div class="container">
  <h1>Hello, World!</h1>
</div>

.container {
  width: 400px;
  height: 100px;
  border: 1px solid black;
  overflow: hidden;
}

@keyframes stretchy-text {
  0% {
    width: 100%;
  }
  50% {
    width: 120%;
  }
  100% {
    width: 100%;
  }
}

.container h1 {
  animation: stretchy-text 1.5s ease-in-out infinite;
}

请查看demo。

结论

通过 HTML 和 CSS 实现橡皮筋文本动画是一件很容易的事情。只需要几行代码就可以为你的网站增加一些动态效果，让用户感觉更加生动有趣。