用CSS3实现荧光按钮

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

Look at me!
Click me!
Hi ho, Silver!
Look at me!
I’m Glowing!
Hi ho, Silver!

Call to Action
Hi ho, Silver!
Look at me!
Got clicks?
Click me!
I’m Glowing!
Click me!

Hi ho, Silver!
Got clicks?
I’m Glowing!
Call to Action
Look at me!
Got clicks?
I’m Glowing!

Click me!
Got clicks?
Click me!
I’m Glowing!
Call to Action
Got clicks?

如何实现呢?
使用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>

Leave a Reply

  

  

  

%d 博主赞过: