HTML CSS 液体填充效果
液体填充文字动画可以使用CSS | ::before选择器。使用关键帧设置动画每一帧的高度。最主要的是关键帧。对于上半部分的百分比，增加高度，而对于下半部分百分比，减小高度。使用25％作为高度的最小值。可以使用百分比值来更改，以根据需要更改动画的最小和最大高度以及外观。创建将在其中应用液体填充效果的文本。要创建结构，将需要标准的HTML。

HTML代码

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <meta name="viewport"
  6.         content="width=device-width, initial-scale=1.0" /> 
  7.     <title>用HTML和CSS在文本上如何创建液体填充动画效果</title> 
  8. </head> 
  9. <body> 
  10.     <center> 
  11.         <h1>Fcant</h1> 
  12.     </center> 
  13. </body> 
  14. </html>

CSS代码

  1. <style> 
  2.     body { 
  3.         margin: 0; 
  4.         padding: 0; 
  5.     } 
  7.     h1 { 
  8.         margin: 200px 0; 
  9.         padding: 0; 
  10.         font-size: 80px; 
  11.         position: relative; 
  12.         color:green; 
  13.     } 
  15.     h1:before { 
  16.         content: "Fcant"; 
  17.         position: absolute; 
  18.         top: 0; 
  19.         left: 0; 
  20.         width: 100%; 
  21.         height: 100%; 
  22.         color:white; 
  23.         overflow: hidden; 
  24.         animation: animate 6s infinite; 
  25.     } 
  27.     @keyframes animate { 
  28.         0% { 
  29.         height: 25%; 
  30.         } 
  31.         25% { 
  32.         height: 50%; 
  33.         } 
  34.         50% { 
  35.         height: 65%; 
  36.         } 
  37.         75% { 
  38.         height: 40%; 
  39.         } 
  40.         100% { 
  41.         height: 25%; 
  42.         } 
  43.     } 
  44. </style>

实现填充效果的完整代码

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <meta name="viewport" content= 
  6.         "width=device-width, initial-scale=1.0" /> 
  7.     <title> 
  8.        用HTML和CSS在文本上如何创建液体填充动画效果？ 
  9.     </title> 
  11.     <style> 
  12.         body { 
  13.             margin: 0; 
  14.             padding: 0; 
  15.         } 
  17.         h1 { 
  18.             margin: 200px 0; 
  19.             padding: 0; 
  20.             font-size: 80px; 
  21.             position: relative; 
  22.             color:green; 
  23.         } 
  25.         h1:before { 
  26.             content: "Fcant"; 
  27.             position: absolute; 
  28.             top: 0; 
  29.             left: 0; 
  30.             width: 100%; 
  31.             height: 100%; 
  32.             color:white; 
  33.             overflow: hidden; 
  34.             animation: animate 6s infinite; 
  35.         } 
  37.         @keyframes animate { 
  38.             0% { 
  39.             height: 25%; 
  40.             } 
  41.             25% { 
  42.             height: 50%; 
  43.             } 
  44.             50% { 
  45.             height: 65%; 
  46.             } 
  47.             75% { 
  48.             height: 40%; 
  49.             } 
  50.             100% { 
  51.             height: 25%; 
  52.             } 
  53.         } 
  54. </style> 
  55. </head> 
  56. <body> 
  57.     <center> 
  58.         <h1>Fcant</h1> 
  59.     </center> 
  60. </body> 
  61. </html>

实现的效果

35.gif