极客笔记使用纯CSS在文本中添加波浪效果
开发人员可以使用CSS为HTML元素添加动画。在这里，我们将使用CSS来在文本中添加波浪效果。它看起来就像是真正的波浪文字。
在这里，我们有三种方法来给文字添加波浪效果。我们会逐个讲解所有的方法。
语法
用户可以按照下面的语法来给文字添加波浪效果。
@keyframes wavey {
0%,
100% {
/* add initial clip-path */
}
50% {
/* final clip path */
}
}
在上述语法中，我们创建了关键帧，用于通过更改文本的剪辑路径向文本添加动画。
示例1
在下面的示例中，我们创建了两个<p>元素，并在两者内部添加相同的文本。使用CSS，我们以这样的方式放置文本，以便两者相互覆盖。我们为第一个文本值设置了透明颜色和蓝色边框。对于第二个文本，我们为其设置了红色颜色和5秒的波浪动画间隔。
要添加动画，我们改变clip-path属性的值。在CSS中，clip-path属性用于显示元素的特定区域，并通过遮罩将其他区域隐藏起来。例如，这里我们显示具有特定坐标的文本多边形，并隐藏第二个文本值的其他区域。
<html>
<head>
<style>
.head {
font-size: 30px;
font-weight: 300;
}
/* set transparent color for first text */
.text:nth-child(1) {
color: transparent;
-webkit-text-stroke: 1px blue;
}
/* set wavy effect in the second text */
.text:nth-child(2) {
color: red;
animation: wavey 5s ease-in-out infinite;
}
.text {
font-size: 6rem;
position: absolute;
}
/* Add animation to the second text using the clip-path CSS property. */
@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
在下面的示例中，我们使用了‘radial-gradient’和‘background-position’ CSS属性为HTML元素添加了波动效果。在这里，我们为每个25%的文字部分添加了相同形状、相同位置但颜色不同的径向渐变。
在动画关键帧中，我们改变了背景元素的背景位置，从而使背景元素移动并在文本中生成波浪效果。
<html>
<head>
<style>
.text {
display: inline-block;
padding: 10px;
font-size: 40px;
font-weight: bold;
/* adding background using a gradient to the text */
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;
/* set up background size and repeat */
background-size: 50% 100%;
background-repeat: no-repeat;
/* setup text as a background clip */
-webkit-background-clip: text;
color: transparent;
background-clip: text;
animation: wavy 2s infinite linear;
}
@keyframes wavy {
/* change background-position */
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’动画中，我们使用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属性来转换整个文本。