今天给大家推荐一个酷炫闪烁的重置按钮，非常不错，具有一定的参考意义上的价值，需要的朋友参考下
效果如下：
代码如下：
<！DOCTYPE html>
<html xmlns =“ http://www.w3.org/1999/xhtml”>
<头>
<meta http-equiv =“ Content-Type” content =“ text / html; charset = utf-8” />
<title>任意按钮</ title>
<style type =“ text / css”>
/ *将所有样式表代码放在此处* /
身体{背景：＃333;
文字阴影：0 1px 1px rgba（0,0,0，.5）;
}
@ -webkit-keyframes bigAssButtonPulse {
来自{background-color：＃1e6a0f;
-webkit-box-shadow：0 0 25px＃333;
}
50％{background-color：＃39ba1f;
-webkit-box-shadow：0 0 75px＃39ba1f;
}
到{background-color：＃1e6a0f;
-webkit-box-shadow：0 0 25px＃333;
}
}
@ -webkit-keyframes greenPulse {
来自{background-color：＃1e6a0f;
-webkit-box-shadow：0 0 9px＃333;
}
50％{background-color：＃39ba1f;
-webkit-box-shadow：0 0 27px＃39ba1f;
}
到{background-color：＃1e6a0f;
-webkit-box-shadow：0 0 9px＃333;
}
}
@ -webkit-keyframes bluePulse {
来自{background-color：＃036075;
-webkit-box-shadow：0 0 9px＃333;
}
50％{background-color：＃2daebf;
-webkit-box-shadow：0 0 27px＃2daebf;
}
到{background-color：＃036075;
-webkit-box-shadow：0 0 9px＃333;
}
}
@ -webkit-keyframes redPulse {
来自{background-color：＃8c2305;
-webkit-box-shadow：0 0 9px＃333;
}
50％{background-color：＃e33100;
-webkit-box-shadow：0 0 27px＃e33100;
}
到{background-color：＃8c2305;
-webkit-box-shadow：0 0 9px＃333;
}
}
@ -webkit-keyframes magentaPulse {
来自{background-color：＃470123;
-webkit-box-shadow：0 0 9px＃333;
}
50％{background-color：＃a9014b;
-webkit-box-shadow：0 0 27px＃a9014b;
}
到{background-color：＃470123;
-webkit-box-shadow：0 0 9px＃333;
}
}
@ -webkit-keyframes orangePulse {
来自{background-color：＃b84c04;
-webkit-box-shadow：0 0 9px＃333;
}
50％{background-color：＃ff5c00;
-webkit-box-shadow：0 0 27px＃ff5c00;
}
到{background-color：＃b84c04;
-webkit-box-shadow：0 0 9px＃333;
}
}
@ -webkit-keyframes orangellowPulse {
来自{background-color：＃bd5000;
-webkit-box-shadow：0 0 9px＃333;
}
50％{background-color：＃ffb515;
-webkit-box-shadow：0 0 27px＃ffb515;
}
到{background-color：＃bd5000;
-webkit-box-shadow：0 0 9px＃333;
}
}
一个按钮 {
-webkit-animation-duration：2s;
-webkit-animation-iteration-count：无限；
}
.green.button {-webkit-animation-name：greenPulse; animation-name：greenPulse;
-webkit-animation-duration：2s; animation-duration：2s;
}
.blue.button {-webkit-animation-name：bluePulse;
-webkit-animation-duration：2s;
}
.red.button {-webkit-animation-name：redPulse;
-webkit-animation-duration：2s;
}
.magenta.button {-webkit-animation-name：magentaPulse;
-webkit-animation-duration：2s;
}
.orange.button {-webkit-animation-name：orangePulse;
-webkit-animation-duration：2s;
}
.orangellow.button {-webkit-animation-name：orangellowPulse;
-webkit-animation-duration：2s;
}
.wall-of-buttons {width：100％;
高度：500像素；
文本对齐：居中；
}
.wall-of-buttons a.button {display：inline-block;
边距：0 30px 30px 0;
}
/ * Playground.css * /
.button {背景：＃222 url（overlay-button.png）repeat-x 0 0;
显示：inline-block;
填充：5px 15px 6px;
颜色：#fff！重要；
font-size：13px;
font-weight：粗体;
行高：1；
文字修饰：无；
-moz-border-radius：5px;
-webkit-border-radius：5px;
-moz-box-shadow：0 1px 3px rgba（0,0,0,0.25）;
-webkit-box-shadow：0 1px 3px rgba（0,0,0,0.25）;
文本阴影：0 -1px 1px rgba（0,0,0,0.25）;
border-bottom：1px固体rgba（0,0,0,0.25）;
职位：相对
光标：指针；
溢出：可见；
宽度：自动；
}
button ::-moz-focus-inner {border：0;
填充：0;
}
.button：hover {background-color：＃111;
颜色：#fff;
}
.button：active {-webkit-transform：translateY（1px）;
-moz-transform：translateY（1px）;
}
/ *小按钮* /
.small.button {font-size：11px;
}
/ *大按钮* /
.large.button {font-size：14px;
填充：8px 19px 9px;
}
/ *我们钟爱的按钮的颜色* /
.green.button {background-color：＃91bd09;
}
.green.button：hover {background-color：＃749a02;
}
.blue.button {background-color：＃2daebf;
}
.blue.button：hover {background-color：＃007d9a;
}
.red.button {background-color：＃e33100;
}
.red.button：hover {background-color：＃872300;
}
.magenta.button {background-color：＃a9014b;
}
.magenta.button：hover {background-color：＃630030;
}
.orange.button {background-color：＃ff5c00;}
.orange.button：hover {background-color：＃d45500;
}
.orangellow.button {background-color：＃ffb515;
}
.orangellow.button：悬停{background-color：＃fc9200;
}
.white.button {background-color：#fff;
边框：1px实线#ccc;
颜色：＃666！重要;
font-weight：正常；
文字阴影：0 1px 1px rgba（255,255,255,1）;
}
.white.button：hover {background-color：#eee;
}
</ style>
</ head>
<body id =“ radioactiveButtonsPage” class =“ chrome windows”>
<div class =“ wall-of-buttons”>
<p>＆nbsp; </ p>
<p>＆nbsp; </ p>
<p>＆nbsp; </ p>
<p>＆nbsp; </ p>
<p>＆nbsp; </ p>
<p>＆nbsp; </ p>
<p><aclass="绿色大按钮">正常</a>
<aclass="蓝色大按钮">运行</a>
<aclass="红色大按钮">严重</a>
<br />
<a class="large orange button">主要</a>
<a class="large orangellow button">次要</a>
<br />
</ p>
</ div>
</ body>
</ html>常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 凯崖之家
