HTML和CSS在文字上液體填充動畫效果
阿新 • • 發佈：2020-08-26
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>