使用纯 CSS 在文本内添加波浪效果

cssweb developmentfront end technology更新于 2024/4/30 7:08:17

开发者可以使用 CSS 为 HTML 元素添加动画。在这里，我们将使用 CSS 在文本内添加波浪效果。它看起来就像文本中真实的波浪一样

这里，我们提供了三种为文本添加波浪效果的方法。我们将逐一介绍所有方法。

语法

用户可以按照以下语法为文本添加波浪效果。

@keyframes wavey {
   0%,
   100% {
      /* 添加初始剪辑路径 */
   }
   50% {
      /* 最终剪辑路径 */
   }
}

在上述语法中，我们创建了关键帧，该关键帧用于通过更改文本的剪辑路径来为文本添加动画。

示例 1

在下面的示例中，我们创建了两个 <p> 元素，并在两个元素内添加了相同的文本。使用 CSS，我们将文本放置得相互覆盖。我们为第一个文本值设置了透明色和蓝色边框。对于第二个文本，我们设置了红色和间隔 5 秒的波浪动画。

要添加动画，我们更改了 clip-path 属性的值。在 CSS 中，clip-path 属性用于显示元素的特定区域，并通过遮罩隐藏其他区域。例如，这里我们以特定坐标显示文本中的多边形，并隐藏第二个文本值的其他区域。

<html>
<head>
   <style>
      .head {
         font-size: 30px;
         font-weight: 300;
      }
      /* 为第一个文本设置透明颜色 */
      .text:nth-child(1) {
         color: transparent;
         -webkit-text-stroke: 1px blue;
      }
      /* 在第二个文本中设置波浪效果 */
      .text:nth-child(2) {
         color: red;
         animation: wavey 5s ease-in-out infinite;
      }
      .text {
         font-size: 6rem;
         position: absolute;
      }
      /* 使用 clip-path CSS 属性为第二个文本添加动画。 */
      @keyframes wavey {
         0%,
         100% {
            clip-path: polygon(0 45%, 6% 38%, 20% 27%,
            38% 24%, 40% 47%, 49% 64%, 51% 72%,
            74% 78%, 79% 75%, 100% 67%, 100% 100%,
            0 100%);
         }
         50% {
            clip-path: polygon(0 59%, 5% 71%, 24% 86%,
            34% 71%, 41% 64%, 41% 46%, 51% 35%,
            74% 21%, 89% 35%, 100% 42%, 100% 100%,
            0 100%);
         }
      }
   </style>
</head>
<body>
   <p class = "text"> TUTORIALSPOINT </p>
   <p class = "text"> TUTORIALSPOINT </p>
   <div class = "head"> Adding the <i> Wave effect inside the text </i> using HTML and CSS </div>
</body>
</html>

示例 2

在下面的示例中，我们使用 CSS 属性"radial-gradient"和"background-position"为 HTML 元素添加波浪效果。在这里，我们为文本添加了径向渐变，其形状和位置相同，并且文本每 25% 的部分使用不同的颜色。

在动画关键帧中，我们更改背景元素的背景位置，从而移动背景元素并在文本中生成波浪效果。

<html>
<head>
   <style>
      .text {
         display: inline-block;
         padding: 10px;
         font-size: 40px;
         font-weight: bold;
         /* 使用渐变为文本添加背景 */
         background:
         radial-gradient(100% 54% at top, blue 99%, red) calc(0*100%/3) 0,
         radial-gradient(100% 58% at bottom, red 99%, blue) calc(3*100%/3) 0,
         radial-gradient(100% 58% at top, blue 99%, red) calc(6*100%/3) 0,
         radial-gradient(100% 58% at bottom, red 99%, blue) calc(9*100%/3) 0;
         /* 设置背景大小并重复 */
         background-size: 50% 100%;
         background-repeat: no-repeat;
         /* 设置文本作为背景剪辑 */
         -webkit-background-clip: text;
         color: transparent;
         background-clip: text;
         animation: wavy 2s infinite linear;
      }
      @keyframes wavy {
         /* 改变背景位置 */
         to {
            background-position:
            calc(-6*100%/3) 0,
            calc(-3*100%/3) 0,
            calc(0*100%/3) 0,
            calc(3*100%/3) 0;
         }
      }
   </style>
</head>
<body>
   <h2>Adding the <i> Wave effect inside the text </i> using HTML and CSS</h2>
   <div class = "text">Welcome to the TutorialsPoint!</div>
</body>
</html>

示例 3

在下面的示例中，我们没有在文本内部添加波浪效果，而是像波浪一样移动文本的每个字符。在这里，我们在 <span> 元素中添加了文本的每个字符。之后，我们为每个字符添加了 wave-text 动画。

在"wave-text"动画中，我们使用 transform CSS 属性沿 Y 方向移动字符。之后，我们通过使用"nth-child"CSS 属性访问字符，为每个字符添加了动画延迟。

<html>
<head>
   <style>
      .text {
         margin-top: 5rem;
      }
      .text span {
         display: inline-block;
         font-size: 3rem;
         color: blue;
         animation: wave-text 1.4s ease-in-out infinite;
      }
      .text span:nth-child(1) {
         animation-delay: 0.0s;
      }
      .text span:nth-child(2) {
         animation-delay: 0.1s;
      }
      .text span:nth-child(3) {
         animation-delay: 0.2s;
      }
      .text span:nth-child(4) {
         animation-delay: 0.3s;
      }
      .text span:nth-child(5) {
         animation-delay: 0.4s;
      }
      .text span:nth-child(6) {
         animation-delay: 0.5s;
      }
      .text span:nth-child(7) {
         animation-delay: 0.6s;
      }
      @keyframes wave-text {
         0% {
            transform: translateY(0rem);
         }
         55% {
            transform: translateY(-1.5rem);
         }
         100% {
            transform: translateY(0rem);
         }
      }
   </style>
</head>
<body>
   <h2>Adding the <i> Wave effect inside the text </i> using HTML and CSS</h2>
   <div class = "text">
      <span> H </span>
      <span> T </span>
      <span> M </span>
      <span> L </span>
      <span> C </span>
      <span> S </span>
      <span> S </span>
   </div>
</body>
</html>

用户学习了如何在文本内部添加波浪效果。在第一种方法中，我们使用"clip-path"属性将文本裁剪成多边形并添加波浪效果。在第二种方法中，我们使用"radial-gradient"和"background-position"CSS属性来实现动画效果。在最后一种方法中，我们使用"transform"CSS属性来变换整个文本。