Question

我希望有人可以帮助我了解html css的人。我正在寻找一种从左到右改变单词颜色的方法。如果我可以改变改变单词颜色所需的时间，那就太好了。（这可以在代码中，不需要用户输入）。

一个例子就是 “你好”（从黑色开始，然后从左到右变为灰色）。如果有人可以帮忙....谢谢

Answer 1

仅限Webkit浏览器：

body {
  font-size: 4em;
}

div {
  display: inline-block;
  color: green;
}

@supports (-webkit-background-clip: text) {
  div {
    background: linear-gradient(to right, green, red);
    -webkit-background-clip: text;
    color: transparent;
  }
}

<div>Some text goes here</div>

Answer 2

编辑：从右向左移动时更改文字颜色

<html><head>
<style>
div.a {color:black;position:absolute;right:0}
</style>
<script src=jquery.js></script>
<script src=jquery-ui.min.js></script>
</head><body>
<div class=a >Hello</div>

<script>
$(document).ready(function(){


$('div.a').animate({
    right: window.innerWidth - 50,      // move from right to left
    color: "red"                        // change color
  }, 10000);                            // time in ms 10000ms -> 10s


});
</script>
</body></html>

如何从左到右更改css中单词的颜色

2 个答案: