如何在文本上设置发光效果的动画？

Question

我真的没有找到任何好的简单教程动画效果.如何在文本上制作动画效果？

Answer 1

如果你只想使用CSS3,你甚至不必使用任何jQuery/Javascript.只需在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 */
}

这是小提琴:http://jsfiddle.net/zenjJ/

编辑:

如果您希望元素独立运行(不悬停),请执行以下操作:

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:

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

您可以在CSS/Javascript中使用时间来获得您正在寻找的确切效果.

最后,这里是小提琴:http://jsfiddle.net/dH6LS/

2013年10月更新:由于所有主流浏览器现在都支持CSS动画,您只需要:

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

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

.confirm_selection {
    font-family: sans-serif;
    font-size: 36px;
    font-weight: bold;
}

<span class="confirm_selection">
[ Confirm Selection ]
</span>

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

不要忘记在生产中包含所有不同的供应商前缀.

Answer 2

您可以使用.animate循环到所选颜色来创建"高亮"效果,这可能是"发光"的意思.

$(".confirm_selection").hover(function() {
    $(this).animate({
        color: "red"
    }, 2000);
}, function() {
    $(this).animate({
        color: "black"
    }, 2000);
});

你可以在这里试试.

注意:颜色动画需要使用颜色动画插件或jQuery UI(我假设你已经使用它,因为它已被包含在你的小提琴中).