我要投稿

css3动画绚丽背景纯css3-纯CSS3发光按钮动画非常华丽

bendan520 css3

2024-04-29 0 6,689 百度已收录

进不了网站？换个网络试试！

我之前向您介绍过一个奇妙的冒泡背景按钮。这次我想分享另一个极其耀眼的按钮动画。我们利用CSS3特性为每个按钮渲染不同的颜色css3动画绚丽背景纯css3，然后让按钮呈现出闪闪发光的动画效果。其实这些花哨的按钮动画可能很多地方都用不到，但其实都是用纯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; }