使用Jquery实现多个文本阴影的动画效果

Question

我想要创造一个变色霓虹灯的效果。为此，我使用了四个文本阴影，仅限于Chrome、FF、Safari和Opera浏览器。这四个阴影颜色相同但模糊程度不同。静态效果看起来很棒，但我好像不能改变它的颜色，因为jquery UI不支持更改文本阴影颜色，而我找到的唯一的jquery插件明确表示它只能用于动画化一个文本阴影... 所以，我希望所有的JS大师们已经解决了这个问题，能够帮助我！我在这里看到了这个效果（非常棒）: http://metafizzy.co/ 有人可以解释一下如何实现吗？我不需要那么花哨... 预先感谢！ John

- LIMsomnium

Answer 1

我认为可以使用jQuery函数.animate()来实现：

$('span#your-neon').animate({
    step : function(now,fx){
         // generate values based on the now parameter (0 < now < 2000)
         // $(this).css('text-shadow','...multiple text-shadows based on the generated values....')
    },
    duration : 2000
})

- Ties

---

我认为这也可以通过CSS3的属性animation来实现。http://filmic.eu/blog/css3-looped-animations/ - Ties

我相信你的jQuery答案应该是可行的，因为我相信我可以通过jquery.css轻松更改css text-shadow颜色。然而，在研究metafizzy示例之后，我意识到它是一个CSS3动画，正如user338128所说，它是通过将body的类更改为“color1”，“color2”等来触发的，并通过预定义的动画使颜色发生变化。由于我不需要那么花哨的东西，我选择了使用CSS3动画循环的方式。非常感谢你的回答和时间。 - LIMsomnium