Question

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

非常感谢！

Answer 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>

动画颜色变化

1 个答案: