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