📌  相关文章
📜  如何使用 HTML 和 CSS 制作垂直波浪形文本行？(1)

📅  最后修改于: 2023-12-03 15:38:01.412000             🧑  作者: Mango

如何使用 HTML 和 CSS 制作垂直波浪形文本行？

在网页设计中，有时候需要添加一些独特的文本效果，例如这里介绍的垂直波浪形文本行。本文将向您展示如何使用 HTML 和 CSS 制作波浪形文本。

HTML 代码

首先，让我们来看看所需的 HTML 代码：

<div class="wave-text">
  <span>H</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
</div>

我们使用了一个 <div> 元素包含了一连串的 <span> 元素，每一个 <span> 元素代表着文本行中的一个字符。

CSS 代码

接下来，我们需要在 CSS 中为这些元素设置样式来实现波浪形效果。这里使用的方法是使用 transform 属性的 rotate() 函数来旋转每一个字符。

.wave-text {
  display: inline-block;
}

.wave-text span {
  display: inline-block;
  transform-origin: 50% 50%;
  animation: wave 1s ease-in-out infinite;
}

.wave-text span:nth-child(1) {
  animation-delay: 0s;
}

.wave-text span:nth-child(2) {
  animation-delay: 0.1s;
}

.wave-text span:nth-child(3) {
  animation-delay: 0.2s;
}

.wave-text span:nth-child(4) {
  animation-delay: 0.3s;
}

.wave-text span:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(14deg);
  }

  20% {
    transform: rotate(-8deg);
  }

  30% {
    transform: rotate(14deg);
  }

  40% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(10deg);
  }

  60% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

我们给外层 <div> 元素设置了 display: inline-block; 属性，以便于内部的 <span> 元素可以按照水平方向进行排列。我们给每一个 <span> 元素设置了 display: inline-block; 属性以便其不会独自占据一整行。

我们使用 transform-origin: 50% 50%; 属性来确保在旋转时每一个 <span> 元素都围绕其中心进行旋转。然后，我们使用 animation 属性来应用一个称为 wave 的动画。这个动画会在 1s 内循环进行。

偏移值使用了 animation-delay 属性，使得每一个 <span> 元素的动画开始时间有所不同。

最后，我们使用 @keyframes 关键字来定义动画。我们使用了多个轴心点和偏移值来实现波浪形效果。

完整代码

下面是完整的 HTML 和 CSS 代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Wave Text</title>
  <style>
    .wave-text {
      display: inline-block;
    }

    .wave-text span {
      display: inline-block;
      transform-origin: 50% 50%;
      animation: wave 1s ease-in-out infinite;
    }

    .wave-text span:nth-child(1) {
      animation-delay: 0s;
    }

    .wave-text span:nth-child(2) {
      animation-delay: 0.1s;
    }

    .wave-text span:nth-child(3) {
      animation-delay: 0.2s;
    }

    .wave-text span:nth-child(4) {
      animation-delay: 0.3s;
    }

    .wave-text span:nth-child(5) {
      animation-delay: 0.4s;
    }

    @keyframes wave {
      0% {
        transform: rotate(0deg);
      }

      10% {
        transform: rotate(14deg);
      }

      20% {
        transform: rotate(-8deg);
      }

      30% {
        transform: rotate(14deg);
      }

      40% {
        transform: rotate(-4deg);
      }

      50% {
        transform: rotate(10deg);
      }

      60% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(0deg);
      }
    }
  </style>
</head>

<body>
  <div class="wave-text">
    <span>H</span>
    <span>e</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>
  </div>
</body>

</html>
结论

通过以上步骤，我们可以很容易地在网页上实现垂直波浪形文本行的效果。了解 HTML 和 CSS 的使用技巧可以帮助您在网页设计中创造出独具特色的效果，让网页更具吸引力。