悬停时的文本填充动画是现代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相关的内容：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。