编程挑战

代码挑战要求

给定如下HTML

按钮点击加载设计效果

更多信息

及其相关基础CSS

/*CSS源代码*/

html,body{

padding:0;

margin:0;

background:#fafafa;

text-align:center;

font-family:'microsoft yahei',Arial,sans-serif;

}

body{

padding-top:5em;

}

h1{

margin-bottom:3rem;

color:#666;

font-size:1.5rem;

font-weight:normal;

}

button{

position:relative;

border:0;

margin:0;

padding:0;

cursor:pointer;

font-family:'microsoft yahei',Arial,sans-serif;

font-size:1.2rem;

color:rgba(0,0,0,0);

background:transparent;

border-radius:.25rem;

-webkit-tap-highlight-color:rgba(0,0,0,0);

-webkit-touch-callout:none;

}

button,

button:after,

button:before{

padding:.6875rem4rem;

-webkit-transition:-webkit-transform0.75s,background-color.125s;

-moz-transition:-moz-transform0.75s,background-color.125s;

-ms-transition:-ms-transform0.75s,background-color.125s;

transition:transform0.75s,background-color.125s;

}

button:after,

button:before{

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

border-radius:.25rem;

}

button:before{

z-index:2;

color:#fff;

background-color:#aa0000;

content:attr(data-label);

}

button:after{

z-index:1;

background-color:#999;

background-repeat:no-repeat;

background-position:center center;

background-image:url(data:image/gif;base64,R0lGODlhEAAQAPIAAJmZmf///7CwsOPj4////9fX18rKysPDwyH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==);

content:'';

}

button:active:before{

background-color:#800000;

}

挑战目标

请使用CSS配合JS生成类似如下的动画点击后加载中效果

提交方式

录制代码编写过程或最终代码：点击开始

跟帖发布代码预览地址（使用GB按钮可以直接嵌入发帖回复中）：演示地址

【强烈提醒】加入QQ群：157757552， 获奖用户及递交快递联系方式

【强烈提醒】请在个人信息中添加QQ号，方便我们联系人获得快递地址

主办方

奖品赞助

本期礼品5份（马克杯） 由hiStarter鼎力赞助

奖项设置

如何增加获奖机率？

最快完成奖一名： 最快保存递交“合格”代码

最佳讲解奖一名： 代码录制过程及讲解详细完整

最佳人气奖一名： 点赞（点+）的人最多

本期参与奖二名： 新人参加本挑战均有机会获取奖品

往期礼物

点击这里晒晒礼物： http://www.gbtags.com/gb/tag/1322.htm

长按二维码关注hiStarter

靠谱的创业团队都在这里

微信号：histarter_china微博：@hiStarter

联系邮件：wow@histarter.com