站長資訊網(wǎng)在上一篇文章中《如何使用CSS動(dòng)態(tài)調(diào)整旋轉(zhuǎn)半徑？》給大家介紹了使用CSS實(shí)現(xiàn)動(dòng)態(tài)調(diào)整旋轉(zhuǎn)半徑的效果，感興趣的朋友可以學(xué)習(xí)了解一下~
本文將給大家?guī)硪粋€(gè)特別好玩的實(shí)現(xiàn)效果，各位對(duì)標(biāo)題所述的“文本液體填充效果”不知道有沒有想法？
首先我們來看一下這個(gè)效果是什么樣的，如下圖所示：
下面我們直接上完整的HTML/css代碼：
注：液體填充文本動(dòng)畫可以使用CSS ::before選擇器來完成。我們將使用關(guān)鍵幀來設(shè)置每一幀動(dòng)畫的高度。
<!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中文網(wǎng)"; 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中文網(wǎng)</h1> </center> </body> </html>
運(yùn)行這段代碼效果就如上圖所示。
想要實(shí)現(xiàn)這種效果就需要大家熟悉掌握 CSS 中的:before 選擇器和@keyframes 規(guī)則。
:before 選擇器：
:before 選擇器在被選元素的內(nèi)容前面插入內(nèi)容，想要使用 content 屬性來指定要插入的內(nèi)容。
注：對(duì)于 IE8 及更早版本中的 :before，必須聲明 <!DOCTYPE>
@keyframes規(guī)則：
使用@keyframes規(guī)則，你可以創(chuàng)建動(dòng)畫，創(chuàng)建動(dòng)畫是通過逐步改變從一個(gè)CSS樣式設(shè)定到另一個(gè)。在動(dòng)畫過程中，您可以更改CSS樣式的設(shè)定多次。指定的變化時(shí)發(fā)生時(shí)使用％，或關(guān)鍵字"from"和"to"，這是和0％到100％相同。0％是開頭動(dòng)畫，100％是當(dāng)動(dòng)畫完成。為了獲得最佳的瀏覽器支持，我們應(yīng)該始終定義為0％和100％的選擇器。
注：使用animation屬性來控制動(dòng)畫的外觀，還使用選擇器綁定動(dòng)畫。
PHP中文網(wǎng)平臺(tái)有非常多的視頻教學(xué)資源，歡迎大家學(xué)習(xí)《css視頻教程》《HTML視頻教程》！
