作业帮 > CSS > 教育资讯

css基础教程:CSS发光按钮实现代码

来源：学生作业帮助网 编辑：作业帮 时间：2024/11/14 15:11:10 CSS
css基础教程:CSS发光按钮实现代码
css基础教程:CSS发光按钮实现代码CSS
【无忧考网-css基础教程:CSS发光按钮实现代码】：

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

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

  1. 定义动画的名字；
  2. 定义动画的持续时间；
  3. 定义动画重复次数。
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 018px #91bd09; }
4.　　　　　　　　　　　　　to { background-color: #749a02; -webkit-box-shadow:: 0 09px #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.}

CSS