利用CSS3制作发光渐变动画按钮

作者:     目录:编程代码 & 网页设计     发表:2010年03月16日

CSS3标准新增动画(animation)属性(@-webkit-keyframes),通过简单的定义动画过程的三个帧即可实现完美的动画效果。

实例预览:radioactive buttons css3 animation

说明:现阶段,由于部分浏览器对CSS3标准支持的力度不够,为了更好的展现面的动画效果,请使用Safari 4.x版本以上浏览器,或者高版本的Firefox浏览器。

实现过程

1. 定义动画过程 greenPulse (类似于函数或过程的概念)

@-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. 定义class(.)或ID(#)的动画属性,指定greenPulse来处理动画(类似于计算机语言中的委托)

a.button {
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	display: inline-block;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	color: #FFFFFF;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
.green.button {
	-webkit-animation-name: greenPulse;
	-webkit-animation-duration: 3s;
}

代码说明:

  • @-webkit-keyframe // 定义动画的三个阶段(或帧) from  (起始),50%(中间),to(结尾)
  • -webkit-animation-duration: 2s; //代表单次动画所持续的时间
  • -webkit-animation-iteration-count: infinite; //动画的循环次数,infinite代表不限次数循环,也可指定循环次数。
  • -webkit-animation-name: greenPulse; //这里的greenPulse就是我们自己定义的动画处理函数或过程

3. HTML代码

<A>任鸟飞网页设计 - www.renniaofei.com</A>

下载所有源代码:radioactive buttons css3 animation (右键另存为)

♥支付宝现金红包♥

支付宝现金红包,每天可领,红包金额最高 99元,使用无门槛,支付宝扫码付、还信用卡、充话费都可以使用。

支付宝红包领取方法:

  • 打开支付宝APP,首页搜索数字 1547638 即可领现金红包
  • 手机用户直接 点击这里领取
  • 或者支付宝APP扫描下面二维码领取
支付宝现金红包 每天可领

发表评论

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.