站長資訊網在上一篇文章中《如何使用CSS動態調整旋轉半徑？》給大家介紹了使用CSS實現動態調整旋轉半徑的效果，感興趣的朋友可以學習了解一下~
本文將給大家帶來一個特別好玩的實現效果，各位對標題所述的“文本液體填充效果”不知道有沒有想法？
首先我們來看一下這個效果是什么樣的，如下圖所示：
下面我們直接上完整的HTML/css代碼：
注：液體填充文本動畫可以使用CSS ::before選擇器來完成。我們將使用關鍵幀來設置每一幀動畫的高度。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title> <style> body { margin: 0; padding: 0; } h1 { margin: 200px 0; padding: 0; font-size: 80px; position: relative; color: #45b1ff; } h1:before { content: "PHP中文網"; 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>PHP中文網</h1> </center> </body> </html>
運行這段代碼效果就如上圖所示。
想要實現這種效果就需要大家熟悉掌握 CSS 中的:before 選擇器和@keyframes 規則。
:before 選擇器：
:before 選擇器在被選元素的內容前面插入內容，想要使用 content 屬性來指定要插入的內容。
注：對于 IE8 及更早版本中的 :before，必須聲明 <!DOCTYPE>
@keyframes規則：
使用@keyframes規則，你可以創建動畫，創建動畫是通過逐步改變從一個CSS樣式設定到另一個。在動畫過程中，您可以更改CSS樣式的設定多次。指定的變化時發生時使用％，或關鍵字"from"和"to"，這是和0％到100％相同。0％是開頭動畫，100％是當動畫完成。為了獲得最佳的瀏覽器支持，我們應該始終定義為0％和100％的選擇器。
注：使用animation屬性來控制動畫的外觀，還使用選擇器綁定動畫。
PHP中文網平臺有非常多的視頻教學資源，歡迎大家學習《css視頻教程》《HTML視頻教程》！
