如何为文本设置动画效果？ [英] How do I animate a glowing effect on text?

问题描述

我真的没有找到任何好的简单教程动画的发光效果。如何对文本进行动画处理？

I haven't really been able to find any good simple tutorials an animating a glow effect. How do I animate glowing on text?

推荐答案

如果你只想使用CSS3， jQuery / Javascript。只需在CSS中执行此操作：

If you want to just use CSS3, you don't even have to use any jQuery/Javascript. Just do this in your CSS:

.confirm_selection {
    -webkit-transition: text-shadow 0.2s linear;
    -moz-transition: text-shadow 0.2s linear;
    -ms-transition: text-shadow 0.2s linear;
    -o-transition: text-shadow 0.2s linear;
    transition: text-shadow 0.2s linear;
}
.confirm_selection:hover {
    text-shadow: 0 0 10px red; /* replace with whatever color you want */
}

href =http://jsfiddle.net/zenjJ/ =nofollow noreferrer> http://jsfiddle.net/zenjJ/

Here's the fiddle: http://jsfiddle.net/zenjJ/

EDIT：

如果您希望元素自己运行（不要悬停），请执行以下操作：

If you want the element to run on it's own (without hovering), do this:

CSS：

.confirm_selection {
    -webkit-transition: text-shadow 1s linear;
    -moz-transition: text-shadow 1s linear;
    -ms-transition: text-shadow 1s linear;
    -o-transition: text-shadow 1s linear;
    transition: text-shadow 1s linear;
}
.confirm_selection:hover,
.confirm_selection.glow {
    text-shadow: 0 0 10px red;
}

Javascript：

Javascript:

var glow = $('.confirm_selection');
setInterval(function(){
    glow.toggleClass('glow');
}, 1000);

您可以使用CSS / Javascript中的时间来获得正确的效果for。

You can play around with the timing in the CSS/Javascript to get the exact effect you're looking for.

最后，这里是小提琴： http：/ /jsfiddle.net/dH6LS/

And finally, here's the fiddle: http://jsfiddle.net/dH6LS/

2013年10月更新：所有主要的浏览器现在都支持CSS动画，所有你需要的是这样：

Update Oct. 2013: being that all major browsers now support CSS animations, all you need is this:

.confirm_selection {
    animation: glow .5s infinite alternate;
}

@keyframes glow {
    to {
        text-shadow: 0 0 10px red;
    }
}

这里是小提琴： http://jsfiddle.net/dH6LS/689/

Don不要忘记在生产中包括所有不同的供应商前缀。

Don't forget to include all the different vendor prefixes in production.

这篇关于如何为文本设置动画效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！