悬停时的文本填充动画是古代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
发表回复