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

在此教程中，我们将使用 HTML 和 CSS 制作垂直波浪形文本行。这种波浪形文本行可以用于网页头部的标题，或者用于任何需要视觉效果的地方。

HTML 结构

首先，我们需要为文本行定义基本的 HTML 结构，如下：

<div class="wave-text">
  <h1>Hello World</h1>
</div>

这里我们使用一个 div 元素，并设置它的类为 wave-text。在这个 div 元素中，我们使用了一个 h1 标签来作为我们的标题。

CSS 样式

接下来，我们需要使用 CSS 样式来制作波浪形文本行。以下是样式代码：

.wave-text {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #2196F3;
  overflow: hidden;
}

.wave-text:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 50px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' ><path d='M0 5 q30 -8 50 0 q20 8 50 0 q30 -8 50 0 q20 8 50 0 v5 l-200 0' /></svg>") repeat-x;
  transform: rotate(180deg);
  animation: wave 1s linear infinite;
}

@keyframes wave {
  0% {
    transform: translateX(0) rotate(180deg);
  }
  100% {
    transform: translateX(-100%) rotate(180deg);
  }
}

.wave-text 类

首先，我们定义了 .wave-text 类，并设置它的 position 属性为 relative，width 属性为 100%，height 属性为 100px，background-color 属性为 #2196F3，并将 overflow 属性设置为 hidden。这样，我们就创建了一个具有指定高度和背景颜色的容器，用于包含我们的标题。

.wave-text::after 伪元素

接下来，我们使用 ::after 伪元素来创建波浪形的底部。我们设置了 content 属性为空字符串，position 属性为 absolute，bottom 属性为 -10px（将其移动到父元素的底部），left 属性为 0（与父元素左侧对齐），width 属性为 100%，height 属性为 50px，并将 background 属性设置为一个 SVG 图像，这个图像将被重复到整个元素的宽度。我们还将 transform 属性设置为 rotate(180deg)，以将图像旋转180度，使其面向上方。

wave 动画

最后，在我们的样式中创建了一个名为 wave 的动画。这个动画将被应用到我们的 ::after 伪元素，并将在1秒钟内沿着 X 轴方向向左平移。在动画开始时，元素将被平移到其最左侧，并且具有旋转180度的转换。在动画完成时，元素将被平移到其最右侧。这个动画将一直重复播放，直到页面卸载或元素被删除。

结论

现在我们已经完成了使用 HTML 和 CSS 制作垂直波浪形文本行。我们的波浪形文本行成功地展示了一个具有动态效果的视觉效果。展示效果如下：

<div class="wave-text">
  <h1>Hello World</h1>
</div>

.wave-text {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #2196F3;
  overflow: hidden;
}

.wave-text:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 50px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' ><path d='M0 5 q30 -8 50 0 q20 8 50 0 q30 -8 50 0 q20 8 50 0 v5 l-200 0' /></svg>") repeat-x;
  transform: rotate(180deg);
  animation: wave 1s linear infinite;
}

@keyframes wave {
  0% {
    transform: translateX(0) rotate(180deg);
  }
  100% {
    transform: translateX(-100%) rotate(180deg);
  }
}