纯CSS实现下划线波浪线文字效果,科技展现文字魅力

2023-09-05 00:23:43

纯CSS实现文字装饰效果：下划线和波浪线

前言

文字装饰在网页设计中起着至关重要的作用，它可以突出重要信息、提升视觉吸引力。本文将深入探讨如何使用纯CSS实现文字下划线和波浪线效果，帮助你打造出美观且引人注目的文本内容。

使用border-bottom实现文字下划线

最简单的方法是使用border-bottom属性。只需为目标文本元素设置属性值，即可在文字下方添加一条实线。

.underline {
  border-bottom: 1px solid #000;
}

你还可以自定义下划线的颜色和粗细，以满足不同的设计需求。

使用伪元素实现文字下划线

另一种选择是使用伪元素::after。这种方法提供了更大的灵活性，让你可以创建更复杂的效果。

.underline {
  position: relative;
}

.underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
}

通过设置伪元素的属性，你可以控制下划线的颜色、位置和大小。

使用border-top实现文字波浪线

要创建波浪线效果，可以使用border-top属性和动画。

.wavy {
  border-top: 1px solid #000;
  animation: wavy 2s infinite;
}

@keyframes wavy {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes定义了动画，它使下划线在水平方向上不断移动，产生波浪效果。

使用伪元素实现文字波浪线

与下划线类似，也可以使用伪元素来实现波浪线效果。

.wavy {
  position: relative;
}

.wavy::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  animation: wavy 2s infinite;
}

@keyframes wavy {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(0);
  }
}