操比操婷婷,国产黄色A片三级熟女,婷婷五月香,5月丁香,6月综合,丁香五月六月婷婷,日韩少妇内射,男女草比视频,中国女人毛片

來(lái)源 | web前端開發(fā)公眾號(hào)

液體填充文字動(dòng)畫可以使用CSS |?:: before選擇器。我們將使用關(guān)鍵幀設(shè)置動(dòng)畫每一幀的高度。

本文的基本樣式完成情況，這完全取決于你希望的文本外觀。最主要的是關(guān)鍵幀。

對(duì)于上半部分的百分比，我們?cè)黾痈叨龋鴮?duì)于下半部分百分比，我們減小高度。我們使用25％作為高度的最小值。你可以使用百分比值來(lái)更改，以根據(jù)需要更改動(dòng)畫的最小和最大高度以及外觀。

在本文中，我們將創(chuàng)建將在其中應(yīng)用液體填充效果的文本。要?jiǎng)?chuàng)建結(jié)構(gòu)，將需要標(biāo)準(zhǔn)的HTML。

HTML代碼：

 <html lang="en"> <head>     <meta charset="UTF-8" />     <meta name="viewport"        content="width=device-width, initial-scale=1.0" /> ????<title>用HTML和CSS在文本上如何創(chuàng)建液體填充動(dòng)畫效果？title>?head> <body>     <center>         <h1>WEB前端開發(fā)公眾號(hào)h1>     center> body> html>

在開始CSS之前，你必須熟悉CSS中的一些概念，其他效果則完全取決于開發(fā)者。

CSS代碼：

<style>     body {         margin: 0;         padding: 0;     } 
    h1 {         margin: 200px 0;         padding: 0;         font-size: 80px;         position: relative;         color:green;     } 
    h1:before {         content: "WEB前端開發(fā)公眾號(hào)";         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>

最后，我們將上述兩個(gè)部分代碼內(nèi)容合并為一體，以實(shí)現(xiàn)對(duì)文本的液體填充效果。

完整代碼如下：

 <html?lang="en">?<head>     <meta charset="UTF-8" />     <meta name="viewport" content=         "width=device-width, initial-scale=1.0" />     <title> ???????用HTML和CSS在文本上如何創(chuàng)建液體填充動(dòng)畫效果？?    title> 
    <style>         body {             margin: 0;             padding: 0;         } 
        h1 {             margin: 200px 0;             padding: 0;             font-size: 80px;             position: relative;             color:green;         } 
        h1:before {             content: "WEB前端開發(fā)公眾號(hào)";             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前端開發(fā)公眾號(hào)h1>     center> body> 
html>

最終效果如下：

【開發(fā)小技巧】020—用HTML和CSS在文本上如何創(chuàng)建液體填充動(dòng)畫效果？