在今天的文章里，我们采用HTML和CSS来实现一个波浪形的动画文本。它是最简单的CSS动画效果之一。对于初学者来讲，这是学习CSS伪元素概念的最佳示例之一。
实现方法，通过结合使用一些CSS属性来执行获取波浪文本的基本思想。主要的“主体”部分是通过使用<body>标记内的<span>标记创建的。CSS代码用于创建HTML结构的“主体”部分的波浪形文本。
HTML代码如下：
<div class="wavy">
<span style="--i:1">W</span>
<span style="--i:2">E</span>
<span style="--i:3">B</span>
<span style="--i:4">前</span>
<span style="--i:5">端</span>
<span style="--i:6">开 </span>
<span style="--i:7">发</span>
<span style="--i:8">公</span>
<span style="--i:9">众</span>
<span style="--i:10">号</span>
</div> 我们通过HTML代码里的HTML标签，先设计一个用于演示的波浪效果的文本。
接着再通过CSS代码，为HTML标签里的文本添加动画效果，CSS代码如下：
<style type="text/css">
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #1ab1cc;
}
.wavy {
position: relative;
}
.wavy span {
position: relative;
display: inline-block;
color: #fff;
font-size: 2em;
text-transform: uppercase;
animation: animate 2s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes animate {
0% {
transform: translateY(0px);
}
40% {
transform: translateY(-40px);
}
80% transform: translateY(-80px);
}
100% {
transform: translateY(0px);
}
}
</style> 最后，将两部分代码进行结合，我们得到了以下完整的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #1ab1cc;
}
.wavy {
position: relative;
}
.wavy span {
position: relative;
display: inline-block;
color: #fff;
font-size: 2em;
text-transform: uppercase;
animation: animate 2s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes animate {
0% {
transform: translateY(0px);
}
40% {
transform: translateY(-40px);
}
80% transform: translateY(-80px);
}
100% {
transform: translateY(0px);
}
}
</style>
</head>
<body>
<div class="wavy">
<span style="--i:1">W</span>
<span style="--i:2">E</span>
<span style="--i:3">B</span>
<span style="--i:4">前</span>
<span style="--i:5">端</span>
<span style="--i:6">开 </span>
<span style="--i:7">发</span>
<span style="--i:8">公</span>
<span style="--i:9">众</span>
<span style="--i:10">号</span>
</div>
</body>
</html> 通过运行此代码，我们看到最终效果：
本文完~