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


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


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3