css 3 发光图片按钮

用CSS3实现的发光按钮效果，虽然只能在safari 4和chrome中才能看到最终效果，但我们还是能享受到css3带给我们的美好憧憬。

对每一个按钮，所作的只需三件事：

定义动画的名字；

定义动画的持续时间；

定义动画重复次数。

1.@-webkit-keyframes　 greenPulse {

2.from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }

3.50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; }

4.to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }

5.　}

在上面的规则中：

@-webkit-keyframes：告知浏览器我们定义的是以关键帧为基础的动画；

greenPulse：动画的名字，这样可以附加到相应的对象之上；

from：定义动画的初始帧；

50%：意味着在动画的中间发生改变；

to：定义动画的尾帧；注意：动画总是回到初始帧，不可能在最后一帧停止。这也意味着一个平滑的动画在开始和结束拥有相同的属性。

然后，将定义的动画添加到相应的对象，如：

1.a.green.button {

2.-webkit-animation-name: greenPulse;

3.-webkit-animation-duration: 2s;

4.-webkit-animation-iteration-count: infinite;

我试了一下:

<script type="text/javascript" src="ajax.js"></script>
<style type="text/css">
@-webkit-keyframes shine {
			0%{
				box-shadow:0px 0px 10px 1px #01A9DB;
			}
			50%{
				box-shadow:0px 0px 50px 10px #01A9DB;
			}
			100%{
				box-shadow:0px 0px 10px 1px #01A9DB;
			}
		}
		@-o-keyframes shine {
			0%{
				box-shadow:0px 0px 10px 1px #01A9DB;
			}
			50%{
				box-shadow:0px 0px 50px 10px #01A9DB;
			}
			100%{
				box-shadow:0px 0px 10px 1px #01A9DB;
			}
		}
		@-ms-keyframes shine {
			0%{
				box-shadow:0px 0px 10px 1px #01A9DB;
			}
			50%{
				box-shadow:0px 0px 50px 10px #01A9DB;
			}
			100%{
				box-shadow:0px 0px 10px 1px #01A9DB;
			}
		}
		@-moz-keyframes shine {
			0%{
				box-shadow:0px 0px 10px 1px #01A9DB;
			}
			50%{
				box-shadow:0px 0px 50px 10px #01A9DB;
			}
			100%{
				box-shadow:0px 0px 10px 1px #01A9DB;
			}
		}
		@keyframes shine {
			0%{
				box-shadow:0px 0px 10px 1px #01A9DB;
			}
			50%{
				box-shadow:0px 0px 50px 10px #01A9DB;
			}
			100%{
				box-shadow:0px 0px 10px 1px #01A9DB;
			}
		}
.shining {
			-webkit-animation:shine 2s ease-in-out 1s infinite;
			-ms-animation:shine 2s ease-in-out 1s infinite;
			-moz-animation:shine 2s ease-in-out 1s infinite;
			-o-animation:shine 2s ease-in-out 1s infinite;
			animation:shine 2s ease-in-out 1s infinite;
		}
</style>
<table>
	<tr>
		<td bgcolor="red"><a href="#" οnclick="action('edf')"><img class="shining" src="吃个饭吧.jpg" draggable="false"/></a></a></td>
		<td>|</td><td bgcolor="yellow"><a href="#">的声誉</a></td>
		<td>|</td><td bgcolor="pink"><a href="#">的声誉</a></td>
	</tr>
</table>
<div id="div" background="pink"></div>