悬停时的文本填充动画是古代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相干的内容：

  • CSS实现分页：https://www.lsbin.com/435.html
  • CSS calc()函数：https://www.lsbin.com/1572.html
  • CSS表单款式丑化：https://www.lsbin.com/3204.html