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

最新推荐文章于 2023-03-01 14:36:00 发布

web前端开发V

最新推荐文章于 2023-03-01 14:36:00 发布

阅读量490

点赞数

文章标签： css html js vue javascript

在今天的文章里，我们采用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>

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