用CSS3实现荧光按钮

在safari 4以上的效果最好,FireFox 3.5效果一般。

如何实现呢?
使用Safari当中的CSS动画功能。是不是很酷的按钮风格呢?

具体操作如下:

建立动画名称;
建立动画过程;
指定动画重复次数;
指定按钮的风格并加上投影效果,然后你的CSS语句调用这些动画。

1.建立动画:

1
2
3
4
5
@-webkit-keyframes greenPulse {
from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; }
to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
}

2. 然后CSS调用它

1
2
3
4
5
a.green.button {
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}

3. html的body当中调用该CSS

1
<a class="green button">Look at me!</a>

发表评论

电子邮件地址不会被公开。 必填项已用*标注