logo标签列表

如何在悬停时为渐变文本背景添加过渡动画？

htmlcss
3

如何在悬停时从纯色背景转换为背景渐变色的动画？可能是从左到右悬停时？我有这个示例代码，但是鼠标悬停时颜色变化太快。我已经尝试使用以下参考资料： 使用CSS3过渡效果和渐变背景 和 使用CSS动画线性渐变 。但似乎找不到最简单的方法来进行悬停。其他参考资料说要在悬停时添加伪元素，但是在使用时似乎有点复杂。只想在悬停元素时将渐变文本动画化。如何添加这些类型的渐变文本颜色过渡？

示例代码：

.hover-grad-txt {
  font-size:100px;
  text-align:center;
  color:#191335;
  background-image:linear-gradient(to right, #191335, #191335);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition:all 0.4s ease-in-out;
}

.hover-grad-txt:hover {
  background-image:linear-gradient(to right, #01A5F8, #01BFD8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<span class="hover-grad-txt">Spear</span>

1
你能解释一下'可能从左到右悬停'是什么意思吗？线性渐变是否会随着用户将鼠标从元素左侧向右移动而移动？ - A Haworth
请参考您接受的答案存在于重复内容中，而且不止一次，而是多次。 - Temani Afif
3个回答
6
为了使其动画效果，不要尝试对渐变进行动画处理，你可以动画处理其位置。
让我们为您的背景使用一个新的线性渐变。它将从纯色开始，然后渐变到渐变的第一种颜色，再渐变到渐变的第二个颜色。
类似于这样：
background-image:linear-gradient(to right, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);
然后，您需要调整大小以仅看到纯色：
background-size: 300% 100%;
以及它的位置：
background-position: top left;
当鼠标悬停时，您只需要移动它：
background-position: top left 100%; 

.hover-grad-txt {
  font-size:100px;
  text-align:center;
  color:#191335;
  background-image:linear-gradient(to right, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 100%;
  background-position: top left;
  transition:all 1s ease-in-out;
}

.hover-grad-txt:hover {
  background-position: top left 100%;
}
<span class="hover-grad-txt">Spear</span>

3

使用新的CSS属性，你也可以像这样做：

<!DOCTYPE html>
<html>
    <head>
        <style>
            @property --a {
                syntax: '<color>';
                inherits: false;
                initial-value: #191335;
            }

            @property --b {
                syntax: '<color>';
                inherits: false;
                initial-value: #191335;
            }

            .hover-grad-txt {
                transition: --a 0.5s, --b 0.5s;
                font-size: 100px;
                text-align: center;
                background-image: linear-gradient(to right, var(--a), var(--b));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .hover-grad-txt:hover {
                --a:#01A5F8;
                --b: #01BFD8;
            }
        </style>
    </head>
    <body>
        <span class="hover-grad-txt">Spear</span>
    </body>
</html>

请记住它仅在Chrome中有效。此外，查看这个问题。

1

除了这些答案外，您还可以使用@keyframes来指定动画代码。此处的示例是将pretty设置为@keyframe，并使用Alpha设置为0的rgba值以确保仍会发生悬停。我选择猩红色以便更清楚地看到变化。

.hover-grad-txt {
  background: linear-gradient(to right, crimson, #01A5F8, #01BFD8);
  background-size: 200% 200%;
  animation: pretty 2s ease-in-out infinite;
  background-clip: text;
  -webkit-background-clip: text;
  transition: color 1s ease-in-out;
  font-size: 100px;
}

.hover-grad-txt:hover {
  color: rgba(0, 0, 0, 0);
}

@keyframes pretty {
  0% {
    background-position: left
  }
  50% {
    background-position: right
  }
  100% {
    background-position: left
  }
}
<div class="hover-grad-txt">Spear</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接