HTML/css實現好玩的文字液體填滿效果-html教學-PHP中文網

HTML/css實現好玩的文字液體填滿效果

藏色散人

發布： 2021-08-30 14:26:19

原創

2337 人瀏覽過

在上一篇文章中《如何使用CSS動態調整旋轉半徑？》為大家介紹了使用CSS實現動態調整旋轉半徑的效果，有興趣的朋友可以學習了解一下~

本文將為大家帶來一個特別好玩的實現效果，各位對標題所述的「文本液體填充效果」不知道有沒有想法？

首先我們來看看這個效果是什麼樣的，如下圖：

GIF 2021-8-30 星期一下午 2-11-27.gif

#下面我們直接上完整的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，必須宣告

@keyframes規則：

#使用@ keyframes規則，你可以創建動畫，創建動畫是透過逐步改變從一個CSS樣式設定到另一個。在動畫過程中，您可以更改CSS樣式的設定多次。指定的變化時發生時使用％，或關鍵字"from"和"to"，這是和0％到100％相同。 0％是開頭動畫，100％是當動畫完成。為了獲得最佳的瀏覽器支持，我們應該始終定義為0％和100％的選擇器。

附註：使用animation屬性來控制動畫的外觀，也使用選擇器綁定動畫。

PHP中文網平台有非常多的影片教學資源，歡迎大家學習《css影片教學》《HTML影片教學》！

以上是HTML/css實現好玩的文字液體填滿效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！