【开发小技巧】029—用CSS如何制作一个波浪形文本动画效果-技术圈

在今天的文章里，我们采用HTML和CSS来实现一个波浪形的动画文本。它是最简单的CSS动画效果之一。对于初学者来讲，这是学习CSS伪元素概念的最佳示例之一。

实现方法，通过结合使用一些CSS属性来执行获取波浪文本的基本思想。主要的“主体”部分是通过使用标记内的标记创建的。CSS代码用于创建HTML结构的“主体”部分的波浪形文本。

HTML代码如下：

<div class="wavy">         <span style="--i:1">Wspan>         <span style="--i:2">Espan>         <span style="--i:3">Bspan>         <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>

最后，将两部分代码进行结合，我们得到了以下完整的代码:

 <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">Wspan>         <span style="--i:2">Espan>         <span style="--i:3">Bspan>         <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>

通过运行此代码，我们看到最终效果：

本文完~