最新公告
  • 欢迎您光临凯崖之家,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 今天给大家推荐一个酷炫闪烁的重置按钮,非常不错,具有一定的参考意义上的价值,需要的朋友参考下

    效果如下:

    代码如下:

    <!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>
    凯崖之家KAIYAZJ.COM一个优质的模板开发平台
    凯崖之家 » 推荐一款酷炫闪烁的预设按钮代码

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    凯崖之家
    一个高级程序员模板开发平台

    发表评论

    发表评论

    • 245会员总数(位)
    • 1051资源总数(个)
    • 107本周发布(个)
    • 10 今日发布(个)
    • 296稳定运行(天)

    凯崖之家KAIYAZJ.COM一个优质的模板开发平台

    立即查看 立即注册
    升级SVIP尊享更多特权立即升级