css 如何动画文本填充渐变颜色？

8ehkhllq 于 2023-05-02 发布在其他

关注(0)|答案(1)|浏览(154)

我是新的CSS动画，并试图弄清楚这一点。我试图设置一个动画文本填充渐变之间的三个指定的颜色。然而，我的文本似乎循环通过颜色不是那些指定的。为什么会这样呢？

.gradient-text {
  background-image: -webkit-linear-gradient(125deg, #810ea8, #ab5ec5, #ead7f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: hue 15s infinite linear;
}
@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

我只想让颜色在#810ea8、#ab5ec5和#ead7f1之间循环。我该怎么做？
谢谢大家。

css

来源：https://stackoverflow.com/questions/76093966/how-to-animate-text-fill-with-gradient-colors

1条答案

按热度按时间

xpcnnkqh1#

最简单的方法是将background-position从背景大小的0%设置为100%。使背景的大小比你的动画元素大得多，这样你就可以得到一个逐渐变化的颜色。我已经将背景动画化，以清楚地显示正在发生的事情，但你可以将其应用到你的文本中。
如果您在hue property中浏览所有360度，则您将根据下面的色轮循环浏览所有颜色（从Stackoverflow上的this post中截取）

下面标记代码。

.gradient-text {
  background-image: linear-gradient(90deg, #810ea8 0%, #ab5ec5 50%, #ead7f1 100%);
  background-size: 1000% 100%;
  animation: changecolor 10s infinite linear;
  padding: 1rem;
  width: max-content;
}
@keyframes changecolor {
  0%, 100% {
    background-position: 0%;  
  }
  50% {
    background-position: 100%;
  }
}

<div class="gradient-text">Here is some gradient text</div>

赞(0）回复(0）举报 2023-05-02

我来回答

css 如何动画文本填充渐变颜色？

1条答案

相关问题

热门标签

最新问答