CSS3 / HTML5中的辉光动画效果

Question

是否有可能在不使用Flash或GIF的情况下在网页上的按钮和其他对象上创建类似的动画发光效果？

Answer 1

使用@keyframes。

你可以像这样制作一个脉冲动画。

#box {
  width:80px;
  height:80px;
  background:gray;
  animation:pulse 0.5s infinite alternate;
}

@keyframes pulse {
  from { box-shadow:0px 0px 10px 3px #0066cc; }
  to { box-shadow:0px 0px 20px 5px #0066cc; }
}

注意@keyframes应该加上这样的前缀：@-webkit-keyframes。 animation属性也应该加前缀

Answer 2

在CSS中添加box-shadow并使其颜色鲜艳。它不会有动画效果，但会有一种发光效果。 小提琴：http://jsfiddle.net/5N2ra/

另见http://css-tricks.com/snippets/css/css-box-shadow/