动画颜色变化答案

【问题标题】：Animated color change动画颜色变化
【发布时间】：2016-09-09 12:49:51
【问题描述】：

我正在尝试对文本进行动画颜色更改，但我遇到了这个问题：在规范中，应该像“加载”一样在悬停时更改颜色。从文本底部到顶部，慢慢地。任何人都可以帮助我，如果那件事甚至可能以及如何实现？

非常感谢！

【问题讨论】：

能贴出代码吗？
所以你想动画文本颜色变化不是一次全部而是从下到上或从一侧到另一侧？
只是环顾四周，我就会看到文字渐变。 stackoverflow.com/questions/39412019/animated-color-change 可能是一个开始。然后你需要对它们进行 jquery 动画处理
越来越近了！ jqueryscript.net/text/…
我担心这在 CSS 中是不容易实现的。最好的机会是 SVG 文本。 SVG 支持开箱即用的文本渐变，并且可以使用 JS 对其进行动画处理。对于纯 HTML、CSS、JS 解决方案，您需要做一些非常讨厌和 hacky 的事情。帮自己一个忙，稍微改变计划的设计。例如。使按钮的背景具有渐变或根本不使用渐变。

【解决方案1】：

一种看起来有点小技巧的方法是让每个字母都有自己的span 并分别为每个字母设置动画

$('.animate').each(function() {
  $('#'+$(this).attr('id')).animate({ color: "#FF0000" }, parseInt($(this).attr('id').substring(1)));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script   src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"   integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="   crossorigin="anonymous"></script>



<span class="animate" id="a1000">A</span><span class="animate" id="a2000">N</span><span class="animate" id="a3000">I</span><span class="animate" id="a4000">M</span><span class="animate" id="a5000">A</span><span class="animate" id="a6000">T</span><span class="animate" id="a7000">E</span>

如果您不想在id 中使用时间，请使用index

$('.animate').each(function(index) {
  $('#'+$(this).attr('id')).animate({ color: "#FF0000" }, index*1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script   src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"   integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="   crossorigin="anonymous"></script>



<span class="animate" id="asdf">A</span><span class="animate" id="asdfge">N</span><span class="animate" id="erv">I</span><span class="animate" id="srbfd">M</span><span class="animate" id="yutj">A</span><span class="animate" id="a6werg000">T</span><span class="animate" id="dgfd">E</span>

编辑

制作自下而上动画的一种方法是使用 svg 动画

<svg width="500" height="300" viewBox="0 0 1000 300">
  <defs>
    <linearGradient id="skyGradient" x1="100%" y1="100%">
      <stop offset="0%" stop-color="blue" stop-opacity=".5">
        <animate attributeName="stop-color" values="white;lightblue;blue;blue;blue;blue" dur="10s" repeatCount="indefinite" />
      </stop>
      <stop offset="100%" stop-color="blue" stop-opacity=".5">
        <animate attributeName="stop-color" values="white;white;lightblue;lightblue;blue;blue" dur="10s" repeatCount="indefinite" />       
      </stop>
    </linearGradient>
  </defs>
  <text id='message' x="0" y="0" font-family="Verdana" font-size="55" fill="url(#skyGradient)">
    Hello, out there
  </text>
</svg>

【讨论】：

但是不能动画它不是从左到右而是从下到上？
不错的解决方案。顺便说一句，为了在悬停时设置动画，请去掉 animate 元素并使用 JS 操作 stop 元素的偏移量。