按钮自动发光用html怎么弄,纯CSS3发光按钮动画 非常绚丽

之前为大家介绍了一款魔幻般的冒泡背景按钮，这次要分享另外一个非常绚丽的按钮动画，我们利用CSS3特性给每一个按钮渲染不同的颜色，然后让按钮出现闪闪发光的动画特效。虽然这种花哨的按钮动画可能应用的地方不多，但这毕竟是用纯CSS3实现的，利用起来非常方便，如果你的页面上需要个性化的按钮，那么可以考虑一下使用这款发光按钮。

HTML代码

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?

CSS代码/* Place all stylesheet code here */body { background: #333; text-shadow: 0 1px 1px rgba(0,0,0,.5); }

@-webkit-keyframes bigAssButtonPulse {  from { background-color: #749a02; -webkit-box-shadow: 0 0 25px #333; }

50% { background-color: #91bd09; -webkit-box-shadow: 0 0 50px #91bd09; }  to { background-color: #749a02; -webkit-box-shadow: 0 0 25px #333; }

}

@-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; }

}

@-webkit-keyframes bluePulse {  from { background-color: #007d9a; -webkit-box-shadow: 0 0 9px #333; }

50% { background-color: #2daebf; -webkit-box-shadow: 0 0 18px #2daebf; }  to { background-color: #007d9a; -webkit-box-shadow: 0 0 9px #333; }

}

@-webkit-keyframes redPulse {  from { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; }

50% { background-color: #e33100; -webkit-box-shadow: 0 0 18px #e33100; }  to { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; }

}

@-webkit-keyframes magentaPulse {  from { background-color: #630030; -webkit-box-shadow: 0 0 9px #333; }

50% { background-color: #a9014b; -webkit-box-shadow: 0 0 18px #a9014b; }  to { background-color: #630030; -webkit-box-shadow: 0 0 9px #333; }

}

@-webkit-keyframes orangePulse {  from { background-color: #d45500; -webkit-box-shadow: 0 0 9px #333; }

50% { background-color: #ff5c00; -webkit-box-shadow: 0 0 18px #ff5c00; }  to { background-color: #d45500; -webkit-box-shadow: 0 0 9px #333; }

}

@-webkit-keyframes orangellowPulse {  from { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333; }

50% { background-color: #ffb515; -webkit-box-shadow: 0 0 18px #ffb515; }  to { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333; }

}a.button {-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;

}.green.button { -webkit-animation-name: greenPulse; -webkit-animation-duration: 3s; }.blue.button { -webkit-animation-name: bluePulse; -webkit-animation-duration: 4s; }.red.button { -webkit-animation-name: redPulse; -webkit-animation-duration: 1s; }.magenta.button { -webkit-animation-name: magentaPulse; -webkit-animation-duration: 2s; }.orange.button { -webkit-animation-name: orangePulse; -webkit-animation-duration: 3s; }.orangellow.button { -webkit-animation-name: orangellowPulse; -webkit-animation-duration: 5s; }.wall-of-buttons { width: 100%; height: 180px; text-align: center; }.wall-of-buttons a.button { display: inline-block; margin: 0 10px 9px 0; }