时间戳

首页 > 解决方案 > 如何在背景颜色穿过文本时为文本颜色设置动画

html - 如何在背景颜色穿过文本时为文本颜色设置动画

问题描述

我有一些带有动画背景的文本，基本上只是在悬停时从上到下填充的纯色。我希望文本在背景穿过文本时改变颜色。因此，如果它在文本中途暂停，甚至是一个字母，部分文本将是一种颜色，而其余文本将是另一种颜色。我知道我已经在某处看到过这种情况，但现在找不到任何示例。

在下面的 gif 中，我的文本只是在颜色之间转换，但这并不是我想要的效果。

悬停示例

标签： htmlcss

解决方案

我要做的是使用伪元素（例如“::before”）复制文本并具有不同的颜色和背景，将其绝对定位在另一个之上，然后转换剪辑路径（以及IE 和 Safari 支持的剪辑）。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.example {
    color: #115;
    background: #fff;
    font-size: 2.5em;
    padding: .25em;
    position: relative;
}
.example:hover,
.example:focus {
    /* this empty rule is a fix for IE10 */
}
.example::before {
    content: attr(data-text);
    color: #fff;
    background: #115;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .25em;
    clip: rect(0,0,2em,0);
    clip-path: inset(0 100% 0 0);
    -moz-transition: clip .5s;
    -webkit-transition: clip .5s;
    transition: clip-path .5s, clip .5s;
}
.example:hover::before,
.example:focus::before {
    clip: rect(0,1920px,2em,0); /* for old browsers that don't support viewport units */
    clip: rect(0,100vw,2em,0); /* can't transition this if 'auto' is specified for any edge */
    clip-path: inset(0);
}
</style>
</head>
<body>

<h2 class="example" data-text="Example">Example</h2>

</body>
</html>

推荐阅读