在今天的文章裡，我們采用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> 通過運作此代碼，我們看到最終效果：
本文完~