javascript - 我如何动画一个单词，使每个字母改变颜色

Question

Closed. This question needs debugging details 。它目前不接受答案。












想改善这个问题吗？更新问题，使其成为 Stack Overflow 的 on-topic。

6 个月前关闭。



Improve this question




如何为单词设置动画，使每个字母以 7 种颜色的范围改变颜色，并且所有字母一次无限显示不同的颜色？

<div class="box">
  <h1 class="logo animate__animated animate__bounceInDown">
    <span class="cake d">D</span>
    <span class="cake y">y</span>
    <span class="cake n">n</span>
    <span class="cake a">a</span>
    <span class="cake m">m</span>
    <span class="cake i">i</span>
    <span class="cake x">x</span>
  </h1>
</div>

这是由带有一些类标签的 span 标签分隔的 HTML 单词

:root{
  --primary: #22D2A0;
  --secondary: #192824;
  --back: #192824;
  --green: #1FC11B;
  --yellow: #FFD913;
  --orange: #FF9C55;
  --red: #FF5555;
  --aqua: #00ffff;
  --color: #fbff00;
  --blue: #4d1461;
  text-align: center;
} 

我想用不同的颜色迭代每个字母，所以每个字母每毫秒都会用最少的代码改变颜色，因为我尝试分别为每个字母设置动画，而且它很笨重……如果还有一种方法可以使用 javascript 在悬停时暂停动画

最佳答案

你可以这样做:

.h1{
    height: 200px;
    width: 400px;
    border: 1px solid #000;
    -webkit-animation: animate_bg 5s;
    animation: animate_bg 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes animate_bg {
    0%   {background:#22D2A0;}
    10%  {background:#192824;}
    20% {background:#192824;}
    30% {background:#1FC11B;}
    40% {background:#1FC11B;}
    50% {background:#FFD913;}
    60% {background:#FF9C55;}
    70% {background:#FF5555;}
    80% {background:#00ffff;}
    90% {background:#fbff00;}
    100% {background:#4d1461}
}

@-webkit-keyframes animate_bg {
    0%   {background:#22D2A0;}
    10%  {background:#192824;}
    20% {background:#192824;}
    30% {background:#1FC11B;}
    40% {background:#1FC11B;}
    50% {background:#FFD913;}
    60% {background:#FF9C55;}
    70% {background:#FF5555;}
    80% {background:#00ffff;}
    90% {background:#fbff00;}
    100% {background:#4d1461}
}

或将 background 更改为 color

.h1{
    -webkit-animation: animate_bg 5s;
    animation: animate_bg 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes animate_bg {
    0%  {color:#22D2A0;}
    10% {color:#192824;}
    20% {color:#192824;}
    30% {color:#1FC11B;}
    40% {color:#1FC11B;}
    50% {color:#FFD913;}
    60% {color:#FF9C55;}
    70% {color:#FF5555;}
    80% {color:#00ffff;}
    90% {color:#fbff00;}
    100% {color:#4d1461}
}

@-webkit-keyframes animate_bg {
    0%  {color:#22D2A0;}
    10% {color:#192824;}
    20% {color:#192824;}
    30% {color:#1FC11B;}
    40% {color:#1FC11B;}
    50% {color:#FFD913;}
    60% {color:#FF9C55;}
    70% {color:#FF5555;}
    80% {color:#00ffff;}
    90% {color:#fbff00;}
    100% {color:#4d1461}
}

关于javascript - 我如何动画一个单词，使每个字母改变颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65693752/

上一篇：python - Pygame 错误帮助 - pygame.error : video system not initialized

下一篇：javascript - 使用事件处理函数重新加载 <ul>

相关文章：

javascript - React map 得到的项目未定义

javascript - 添加指向 CSS :nth-child class 的链接

Javascript 从日期时间中删除时间

css - 用于移动网络应用程序的 HTML 和 CSS 锁屏

jquery - 悬停在 Twitter 引导按钮上无法正常工作

jquery - 使用 jquery 从标签中获取值

javascript - jQuery/javascript - 尝试将对象的函数作为参数传递给函数

javascript - Angular 2 ngFor 中每个项目的函数调用返回值

javascript - JQuery slider 根据 slider 值更改图像

javascript - 将 javascript 事件获取到被覆盖的对象

Answer 1

你可以这样做:

.h1{
    height: 200px;
    width: 400px;
    border: 1px solid #000;
    -webkit-animation: animate_bg 5s;
    animation: animate_bg 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes animate_bg {
    0%   {background:#22D2A0;}
    10%  {background:#192824;}
    20% {background:#192824;}
    30% {background:#1FC11B;}
    40% {background:#1FC11B;}
    50% {background:#FFD913;}
    60% {background:#FF9C55;}
    70% {background:#FF5555;}
    80% {background:#00ffff;}
    90% {background:#fbff00;}
    100% {background:#4d1461}
}

@-webkit-keyframes animate_bg {
    0%   {background:#22D2A0;}
    10%  {background:#192824;}
    20% {background:#192824;}
    30% {background:#1FC11B;}
    40% {background:#1FC11B;}
    50% {background:#FFD913;}
    60% {background:#FF9C55;}
    70% {background:#FF5555;}
    80% {background:#00ffff;}
    90% {background:#fbff00;}
    100% {background:#4d1461}
}

或将 background 更改为 color

.h1{
    -webkit-animation: animate_bg 5s;
    animation: animate_bg 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes animate_bg {
    0%  {color:#22D2A0;}
    10% {color:#192824;}
    20% {color:#192824;}
    30% {color:#1FC11B;}
    40% {color:#1FC11B;}
    50% {color:#FFD913;}
    60% {color:#FF9C55;}
    70% {color:#FF5555;}
    80% {color:#00ffff;}
    90% {color:#fbff00;}
    100% {color:#4d1461}
}

@-webkit-keyframes animate_bg {
    0%  {color:#22D2A0;}
    10% {color:#192824;}
    20% {color:#192824;}
    30% {color:#1FC11B;}
    40% {color:#1FC11B;}
    50% {color:#FFD913;}
    60% {color:#FF9C55;}
    70% {color:#FF5555;}
    80% {color:#00ffff;}
    90% {color:#fbff00;}
    100% {color:#4d1461}
}