css - 如何为文本制作发光效果动画？

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 */
}

这是 fiddle :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 中调整时间以获得您正在寻找的确切效果。

最后，这是 fiddle :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>

这是 fiddle :http://jsfiddle.net/dH6LS/689/

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