【开发小技巧】020—用HTML和CSS在文本上如何创建液体填充动画效果？-CSDN博客

来源 | web前端开发公众号

液体填充文字动画可以使用CSS | :: before选择器。我们将使用关键帧设置动画每一帧的高度。

本文的基本样式完成情况，这完全取决于你希望的文本外观。最主要的是关键帧。

对于上半部分的百分比，我们增加高度，而对于下半部分百分比，我们减小高度。我们使用25％作为高度的最小值。你可以使用百分比值来更改，以根据需要更改动画的最小和最大高度以及外观。

在本文中，我们将创建将在其中应用液体填充效果的文本。要创建结构，将需要标准的HTML。

HTML代码：

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8" />     <meta name="viewport"        content="width=device-width, initial-scale=1.0" />     <title>用HTML和CSS在文本上如何创建液体填充动画效果？</title> </head> <body>     <center>         <h1>WEB前端开发公众号</h1>     </center> </body> </html>

在开始CSS之前，你必须熟悉CSS中的一些概念，其他效果则完全取决于开发者。

CSS代码：

<style>     body {         margin: 0;         padding: 0;     } 
    h1 {         margin: 200px 0;         padding: 0;         font-size: 80px;         position: relative;         color:green;     } 
    h1:before {         content: "WEB前端开发公众号";         position: absolute;         top: 0;         left: 0;         width: 100%;         height: 100%;         color:white;         overflow: hidden;         animation: animate 6s infinite;     } 
    @keyframes animate {         0% {         height: 25%;         }         25% {         height: 50%;         }         50% {         height: 65%;         }         75% {         height: 40%;         }         100% {         height: 25%;         }     } </style>

最后，我们将上述两个部分代码内容合并为一体，以实现对文本的液体填充效果。

完整代码如下：

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8" />     <meta name="viewport" content=         "width=device-width, initial-scale=1.0" />     <title>        用HTML和CSS在文本上如何创建液体填充动画效果？     </title> 
    <style>         body {             margin: 0;             padding: 0;         } 
        h1 {             margin: 200px 0;             padding: 0;             font-size: 80px;             position: relative;             color:green;         } 
        h1:before {             content: "WEB前端开发公众号";             position: absolute;             top: 0;             left: 0;             width: 100%;             height: 100%;             color:white;             overflow: hidden;             animation: animate 6s infinite;         } 
        @keyframes animate {             0% {             height: 25%;             }             25% {             height: 50%;             }             50% {             height: 65%;             }             75% {             height: 40%;             }             100% {             height: 25%;             }         } </style> </head> 
<body>     <center>         <h1>WEB前端开发公众号</h1>     </center> </body> 
</html>

最终效果如下：