CSS 在文本中创建波浪效果

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

这里我们有三种方法来在文本中添加波浪效果。我们会依次查看所有方法。

语法

用户可以遵循下面的语法来添加波浪效果到文本中。

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

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

示例1

在下面的示例中，我们创建了两个

元素，其中都添加了相同的文本。使用CSS，我们将文本放置在一起，以便两个文本互相覆盖。我们为第一个文本值设置了透明颜色和蓝色边框。对于第二个文本，我们设置了红色和每5秒的波浪动画。

为添加动画，我们改变了剪辑路径属性的值。在CSS中，剪辑路径属性用于显示元素的特定区域并通过掩盖其它区域隐藏它。例如，在这里，我们使用特定坐标显示文本中的多边形，并隐藏了第二个文本值的其它区域。

<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"> 使用HTML和CSS在文本中添加<i>波浪效果</i> </div>
   </body>
</html>

示例2

在下面的示例中，我们使用了‘radial-gradient’和‘background-position’CSS属性来为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>使用HTML和CSS在文本中添加<i>波浪效果</i></h2>
      <div class = "text">欢迎来到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>使用HTML和CSS在文本中添加<i>波浪效果</i></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属性对整个文本进行转换。