纯CSS3发光按钮动画 非常绚丽

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

在线演示源码下载

	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?

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

在线演示  源码下载

本文链接：http://www.codeceo.com/article/pure-css3-shine-buttons.html
本文作者：码农网 – 小峰