我还没有真正找到任何好的简单教程来制作发光效果动画。如何在文本上制作发光动画?
最佳答案
如果您只想使用 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/
不要忘记在生产中包含所有不同的供应商前缀。
关于css - 如何为文本制作发光效果动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7061420/