CSS 如何在文本上制作发光效果的动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7061420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I animate a glowing effect on text?
提问by NullVoxPopuli
I haven't really been able to find any good simple tutorials an animating a glow effect. How do I animate glowing on text?
我真的找不到任何好的简单教程来制作发光效果的动画。如何在文本上制作发光的动画？
回答by Joseph Silber
If you want to just use CSS3, you don't even have to use any jQuery/JavaScript. Just do this in your CSS:
如果您只想使用 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 */
}
Here's the fiddle: http://jsfiddle.net/zenjJ/
这是小提琴：http: //jsfiddle.net/zenjJ/
If you want the element to run on its own (without hovering), do this:
如果您希望元素自行运行（不悬停），请执行以下操作：
CSS:
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);
You can play around with the timing in the CSS/JavaScript to get the exact effect you're looking for.
您可以在 CSS/JavaScript 中调整时间以获得您正在寻找的确切效果。
And finally, here's the fiddle: http://jsfiddle.net/dH6LS/
最后，这是小提琴：http: //jsfiddle.net/dH6LS/
Update Oct. 2013:being that all major browsers now support CSS animations, all you need is this:
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>Here's the fiddle: http://jsfiddle.net/dH6LS/689/
这是小提琴：http: //jsfiddle.net/dH6LS/689/
Don't forget to include all the different vendor prefixes in production.
不要忘记在生产中包含所有不同的供应商前缀。
回答by karim79
You can use .animateto cycle to a chosen colour to create a "highlight" effect which is presumably what "glowing" means.
您可以使用.animate循环到所选颜色来创建“高光”效果，这大概就是“发光”的意思。
$(".confirm_selection").hover(function() {
$(this).animate({
color: "red"
}, 2000);
}, function() {
$(this).animate({
color: "black"
}, 2000);
});
NOTE: Colour animation requires the use of either the colour animation plugin, or jQuery UI (which I assume you are already using as it has been included in your fiddle).
注意：彩色动画需要使用彩色动画插件或 jQuery UI（我假设您已经在使用它，因为它已包含在您的小提琴中）。
回答by Jason Gennaro
You can do this with pure CSS3 transitions:
你可以用纯 CSS3 过渡来做到这一点：
div.transition{
text-decoration: none;
color: blue;
text-shadow: none;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
-o-transition: 500ms linear 0s;
transition: 500ms linear 0s;
outline: 0 none;
background-color:#000;
font-size:2em;
width:300px;
height:100px;
padding:1em;
}
div.transition:hover {
color: #fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}
Example: http://jsfiddle.net/jasongennaro/z5jCB/1/
示例：http: //jsfiddle.net/jasonennaro/z5jCB/1/
Note: Glowing text works best on a dark background.
注意：发光文本在深色背景上效果最佳。
Inspiration (and much of the code) from here: http://www.sitepoint.com/css3-glowing-link-effect/
灵感（和大部分代码）来自这里：http: //www.sitepoint.com/css3-glowing-link-effect/
回答by Ravi
Try this code:
试试这个代码：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function ()
{
var glow = $('h1');
setInterval(function()
{
glow.toggleClass('glow');
}, 1000);
});
</script>
<style type="text/css">
h1 {
-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;
width: 725px;
}
h1:hover,
h1.glow
{
text-shadow: 0 0 10px Green;
}
</style>
</head>
<body>
<h1>This text has Glow Animation Effect</h1>
<div class="buttons">
<input type="text" name="txt"> <input type="button" class="btnAdd" value="Add"><br>
</div>
<h3>J Query</h3>
</body>
</html>
回答by webecon
No one mention css3 keyframes which can animate the glow effect getting rid of javascript(this coming from a javascript dev).
没有人提到 css3 关键帧，它可以使发光效果摆脱 javascript（这来自 javascript 开发人员）。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
:root { --color: blue; }
span.vjs { --color: #F3E5AB; }
span.cv { --color: skyblue; }
body {background:gray;}
.vjs, .cv, h1 {
text-align: center;
font-size: 30pt;
font-weight: 100;
font-family: cursive2;
}
.vjs {
text-shadow: 0 0 2px #333333, 0 0 4px #333333;
color: var(--color);
}
.cv {
text-shadow: 0 0 2px #fff, 0 0 4px #fff;
color: #2965f1;
}
h1 {
text-shadow: 0 0 2px #fff, 0 0 4px #fff;
color:black;
}
.cv:hover, .vjs:hover, h1:hover {
animation: glow 1s linear infinite;
color: var(--color);
}
@keyframes glow {
0% {text-shadow: 0 0 0px var(--color);}
50% {text-shadow: 0 0 10px var(--color);}
100% {text-shadow: 0 0 0px var(--color);}
}
</style>
<script src="vanilla-js.com/lib/vanilla.4.1.min.js"></script>
</head>
<body>
<h1>This text has Real Glow Animation Effect with
<span class="vjs">Vanilla JS</span>And <span class="cv">CSS Variables</span>. Hover over all the texts!</h1>
</body>
</html>
A jsfiddle
一个jsfiddle
回答by martin
Here is an animation effect that I have found useful in the past by adding a new step function to the jQuery fxobject.
这是一个动画效果，我在过去通过向jQuery fx对象添加新的步进函数而发现它很有用。
$.fx.step.myBlurRedEffect = function (fx) {
$(fx.elem).css({
textShadow: '0 0 ' + Math.floor(fx.now) + 'px #FF0000'
});
}
Which is called in the usual way (say blur 6px in half a second):
以通常的方式调用（比如半秒内模糊 6px）：
$('#myID').animate({
myBlurRedEffect: 6
},{
duration: 500
});
This should get you started, and you should find many fun ways to extend upon this, add other CSS parameters etc... :)
这应该让你开始，你应该找到许多有趣的方法来扩展它，添加其他 CSS 参数等...... :)
