关于css:如何使用CSS创建文本填充动画

42次阅读

共计 1832 个字符，预计需要花费 5 分钟才能阅读完成。

悬停时的 文本填充动画 是古代 Web 设计概念的一种 文本动画 。在此动画中, 文本在特定方向(即, 从左到右, 从右到左, 从上到下或从下到上) 的色彩与原始文本的色彩不同。

这种动画类型不仅限于文本。你能够应用雷同的技术来填充任何整机或形态, 例如填充杯子或杯子能够很好地实现此动画。

办法：办法是用不同色彩的图层笼罩文本, 并在开始时将其宽度放弃为 0, 并在鼠标悬停时将其宽度减少到 100%。

HTML 代码：在本节中, 咱们有一个带有数据文本属性的 ” h1″ 元素, 咱们将应用它在原始文本上搁置一个图层。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>Text Fill</title>
</head>
  
<body>
    <h1 data-text="Geeks">Geeks</h1>
</body>
  
</html>

CSS 代码：对于 CSS, 请依照以下步骤操作。

第 1 步：利用一些根本款式, 例如将文本对齐核心和根本背景色彩。
第 2 步：将内容设置为咱们在 ” h1″ 标签中应用的属性。这将笼罩原始文本。
第三步：将 width 设置为 0 并设置与文本原始色彩不同的任何色彩。
步骤 4：当初, 将鼠标悬停时将 ” width” 设置为 100。

留神：你能够将 ” 宽度 ” 设置为任何其余值, 以仅笼罩鼠标悬停时文本的特定局部。例如, 将其设置为 50%, 以使文本最多只能填充一半的长度。

<style>
    h1 {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 5em;
        color: #ccc;
    }
  
    h1::before {
  
        /* This will create the layer
           over original text*/
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
  
        /* Setting different color than
           that of original text  */
        color: green;
        overflow: hidden;
  
        /* Setting width to 0*/
        width: 0%;
        transition: 1s;
    }
  
    h1:hover::before {
  
        /* Setting width to 100 on hover*/
        width: 100%;
    }
</style>

残缺的代码：它是以上两局部代码的组合。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>Text Fill</title>
  
    <style>
        h1 {
            margin: 0;
            padding: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 5em;
            color: #ccc;
        }
  
        h1::before {
            /* This will create the layer
               over original text*/
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
  
            /* Setting different color than
               that of original text  */
            color: green;
            overflow: hidden;
  
            /* Setting width as 0*/
            width: 0%;
            transition: 1s;
        }
  
        h1:hover::before {
  
            /* Setting width to 100 on hover*/
            width: 100%;
        }
    </style>
</head>
  
<body>
    <h1 data-text="Geeks">Geeks</h1>
</body>
  
</html>

输入如下：

更多前端开发相干内容请参考：lsbin – IT 开发技术：https://www.lsbin.com/

参考以下更多 CSS 相干的内容：