如何使用 react 和 javascript 每秒更改部分文本的字体颜色？

Posted 2023-03-15

【中文标题】如何使用 react 和 javascript 每秒更改部分文本的字体颜色？

【英文标题】：How to change font color for part of text every second using react and javascript?

【发布时间】：2021-01-13 23:47:15

【问题描述】：

我想使用 react 和 javascript 每秒更改部分文本的字体颜色。

这是我的字符串“早上好”

我想让文本“早上”改变颜色

下面是我想换的颜色

红、绿、蓝、黄、紫、粉、黑

以下是我尝试过的，

const Parent = () => 
    <div>
        <span>good</span>
        <span class="change">morning</span>
    </div>



.change 
    animation: change 1s step-end both;


@key-frames change 
    from color: red
    to color: green

但以上只是将文本从红色变为绿色。我如何将其保持为一个循环，例如应该将文本颜色从红色、绿色、蓝色、黄色、紫色、粉红色、黑色以及红色、绿色等更改。

谁能帮我解决这个问题。谢谢。

【问题讨论】：

你看到这个答案了吗？ ***.com/a/16782559/5605822

这能回答你的问题吗？ Looping Animation of text color change using CSS3

【参考方案1】：

修正你的语法（@key-frames -> @keyframes），使动画无限并添加更多颜色步骤：

.change 
  animation: change 1s step-end infinite;


@keyframes change 
  0% 
    color: red
  
  25% 
    color: green
  
  50% 
    color: orange
  
  75% 
    color: blue
  

<div>
  <span>good</span>
  <span class="change">morning</span>
</div>

如果你打算在 React 中使用它，你还需要 className="change" 而不是 class="change"。

【讨论】：

感谢添加黄色、粉色、紫色、黑色我应该做类似 100% color: yellow 125% color: pink 150% color: Purple 175% color : 黑色?

不，% 必须保持在 0 到 100 之间。如果总共有 8 种颜色，则需要 0% 12.5%、25.0%、37.5%、50.0%、62.5%、75.0%、 87.5%。