当前位置:首页> 正文
纯CSS3发光按钮动画 非常绚丽
之前为大家介绍了一款魔幻般的冒泡背景按钮,这次要分享另外一个非常绚丽的按钮动画,我们利用CSS3特性给每一个按钮渲染不同的颜色,然后让按钮出现闪闪发光的动画特效。虽然这种花哨的按钮动画可能应用的地方不多,但这毕竟是用纯CSS3实现的,利用起来非常方便,如果你的页面上需要个性化的按钮,那么可以考虑一下使用这款发光按钮。
在线演示源码下载
HTML代码
<div ><a >Look at me!</a><a >Click me!</a><a >Hi ho, Silver!</a><a >Look at me!</a><a >I'm Glowing!</a><a >Hi ho, Silver!</a><br /><a >Call to Action</a><a >Hi ho, Silver!</a><a >Look at me!</a><a >Got clicks?</a><a >Click me!</a><a >I'm Glowing!</a><a >Click me!</a><br /><a >Hi ho, Silver!</a><a >Got clicks?</a><a >I'm Glowing!</a><a >Call to Action</a><a >Look at me!</a><a >Got clicks?</a><a >I'm Glowing!</a><a >Click me!</a><a >Got clicks?</a><a >Click me!</a><a >I'm Glowing!</a><a >Call to Action</a><a >Got clicks?</a></div>
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; }
在线演示源码下载
展开全文阅读
相关内容
-
怎么把电脑显卡清灰分享|显卡清灰教程
怎么把电脑显卡清灰分享|显卡清灰教程,,1. 显卡清灰教程1.首先...
-
网上怎么装电脑系统|电脑怎样在线装系统
网上怎么装电脑系统|电脑怎样在线装系统,,1. 电脑怎样在线装系...
-
盘点20部高分动画电影|儿童动漫电影推荐
盘点20部高分动画电影|儿童动漫电影推荐,标签,钟楼怪人在巴黎...
-
紧追流行游戏!愤怒的小鸟会做出一系列的动画。
紧追流行游戏!愤怒的小鸟会做出一系列的动画。,,愤怒的小鸟是最...
-
虾类安装经验分享!
虾类安装经验分享!,,虾类安装经验分享: 1,机箱的电源光盘应该接...
-
tim电脑在线是什么意思|Tim在线啥意思
tim电脑在线是什么意思|Tim在线啥意思,,Tim在线啥意思是“题目...
-
Windows电脑申请iOS证书教程及工具分享
Windows电脑申请iOS证书教程及工具分享,证书,文件,首先介绍下...
-
an测试动画快捷键|an中的快捷键
an测试动画快捷键|an中的快捷键,,1. an中的快捷键步骤如下:1、 ...
-
如何再手机上关闭电脑上的QQ在线|怎么用手机关
如何再手机上关闭电脑上的QQ在线|怎么用手机关闭电脑qq在线,,...
-
在中关村在线上买手机可靠吗?诺基亚的c7和摩托罗
在中关村在线上买手机可靠吗?诺基亚的c7和摩托罗拉的defy那个...
-
电脑版漫画台|漫画台电脑版在线看
电脑版漫画台|漫画台电脑版在线看,,漫画台电脑版在线看漫画台...
-
故事口袋听听电脑版|口袋故事在线收听免费
故事口袋听听电脑版|口袋故事在线收听免费,,1. 口袋故事在线收...
-
电脑配置在线查看|电脑配置查询器
电脑配置在线查看|电脑配置查询器,,电脑配置查询器①使用蓝屏...
-
问卷星电脑版在线登录|问卷星电脑版登录官网
问卷星电脑版在线登录|问卷星电脑版登录官网,,问卷星电脑版登...
-
删除wps模板动画|wpsppt演示文稿中删除动画效果
删除wps模板动画|wpsppt演示文稿中删除动画效果,模板,删除,动...