很酷的CSS发光按钮实现方法

网络整理 - 07-27

用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. }

在上面的规则中:

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

1.a.green.button {

2.       -webkit-animation-name: greenPulse;

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

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

5.}