SOURCE

<div style="height:700px;width:100%">
<a class="helpus" href='javascript:;' title="支持原创文章 & 开源项目，请我们喝杯咖啡吧^_Q">
	<div class="paycode">
		<div>　　如果你觉得我们Alloyteam团队的博客和开源项目给你带来价值，可以通过捐赏支持我们，有你的支持，我们会做得更好！</div>
<br />
		<img src="http://www.alloyteam.com/wp-content/uploads/2017/03/wechatpaycode.png" />
		<br /><br />
		<img src="http://www.alloyteam.com/wp-content/uploads/2017/03/alipaycode.png" />
		
	</div>
</a>


<div class="toolbar">
<a class="helpus2" href='javascript:;' >
                <div class="paycode">
                    <div style="display: -webkit-box;margin: auto;width: 400px;">
                        <div class="wechatpay"></div>
                        <div class="alipay"></div>
                    </div>
                    
                    <!-- <img src="images/wechatpaycode.png" />
                    <img src="images/alipaycode.png" / >-->
                    <div>如果你觉得我们Alloyteam团队的博客和开源项目给你带来价值，可以通过捐赏支持我们<br />有你的支持，我们会做得更好！</div>
                </div>
            </a>
</div>

<div class="helpus3" title="如果觉得博客不错，赞助我吃辣条吧">
  <div class="pay">
    <div>希望大家能够喜欢</div>
    <div style="display:block;overflow:hidden;margin:5px">
    <img src="http://www.alloyteam.com/wp-content/uploads/2017/03/wechatpaycode.png" alt="wechat-pay">
    <img src="http://www.alloyteam.com/wp-content/uploads/2017/03/alipaycode.png" alt="alipay">
    </div>
  </div>
</div>
</div>

a{
	color: #1982D1;
	text-decoration: none;

}
a:hover {
	color: orange;
	text-decoration: none;
}

a:link,
a:visited,
a:active {



	text-decoration:none;

	-webkit-transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;
	-moz-transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;
	-ms-transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;
	-o-transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;
	transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;

}

a:hover,
a:focus{
	color: orange;
	text-decoration: none;


	-webkit-transition: text-shadow 250ms ease-in 0ms, color 250ms ease-in 0ms;
	-moz-transition: text-shadow 250ms ease-in 0ms, color 250ms ease-in 0ms;
	-ms-transition: text-shadow 250ms ease-in 0ms, color 250ms ease-in 0ms;
	-o-transition: text-shadow 250ms ease-in 0ms, color 250ms ease-in 0ms;
	transition: text-shadow 250ms ease-in 0ms, color 250ms ease-in 0ms;
}
.helpus{
	display:block;

	margin: 20px auto;
	text-decoration:none;
	color:white;
	font-size:12px;
	line-height:1.8;
	
	background: url(http://www.alloyteam.com/wp-content/uploads/2017/03/paybutton2.png) no-repeat center  #fff;
	background-size:cover;
	width: 220px;
	height: 80px;
border:1px solid rgba(0,0,0,0);
	border-radius: 10px;
	
	
}
.helpus:hover{
	border-radius: 10px 10px 0 0;
	color:white;
}
.helpus .paycode{
	display:none;
	position:relative;
	z-index:100;
	margin: 80px 0 0 0px;
	padding:10px;


	width:200px;

	background:#cd533d;
	overflow:hidden;
	
}

.helpus:hover .paycode{
	display:block;
}

.helpus .paycode img{
	width:200px;
}




.toolbar {
	width: 410px;
    margin: auto;
    margin-top: 90px;
    margin-bottom: 50px;
}
.toolbar .helpus{
	display:block;

	margin: 20px auto;
	text-decoration:none;
	color:white;
	font-size:12px;
	line-height:1.8;
	
	background: url(http://www.alloyteam.com/wp-content/uploads/2017/03/paybutton2.png) no-repeat center #fff;
	background-size:cover;
	width: 219px;
	height: 80px;
	border:1px solid rgba(0,0,0,0);
	border-radius: 10px;
	
	
}
.toolbar .helpus:hover{
	border-radius: 10px 10px 0 0;
	color:white;
}
.toolbar .helpus .paycode{
	display:none;
	position:relative;
	z-index:100;
	margin: 80px 0 0 0px;
	padding:10px;


	width:200px;

	background:#cd533d;
	overflow:hidden;
	
}

.toolbar .helpus:hover .paycode{
	display:block;
}

.toolbar .helpus .paycode img{
	width:200px;
}
.toolbar .wechatpay {
	background: url(http://www.alloyteam.com/wp-content/uploads/2017/03/wechatpaycode.png) no-repeat center #fff;
	background-size:cover;
	width:200px;
	height: 258px;
}
.toolbar .alipay {
	background: url(http://www.alloyteam.com/wp-content/uploads/2017/03/alipaycode.png) no-repeat center #fff;
	background-size:cover;
	width:200px;
	height: 258px;
	margin-left: 10px;
}
.helpus2{
	display:block;
	margin: 20px auto;
	text-decoration:none;
	color:#666;
	font-size:16px;
	line-height:2;
	
	background: url(http://www.alloyteam.com/wp-content/uploads/2017/03/paybutton2.png) no-repeat center  #fff;
	background-size:cover;
	width: 219px;
	height: 80px;
	border: 1px solid #ccc;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 10px;
	
	-webkit-transition: border 500ms ease-in 0ms;
	-moz-transition: border 500ms ease-in 0ms;
	-ms-transition: border 500ms ease-in 0ms;
	-o-transition: border 500ms ease-in 0ms;
	transition: border 500ms ease-in 0ms;
	
}
.helpus2:hover {
	border: 1px solid orange;
	-webkit-transition: border 300ms ease-in 0ms;
	-moz-transition: border 300ms ease-in 0ms;
	-ms-transition: border 300ms ease-in 0ms;
	-o-transition: border 300ms ease-in 0ms;
	transition: border 300ms ease-in 0ms;
}
.helpus2 .paycode{
	display:none;
	position:relative;
	z-index: 99999;
	margin:-90% -100%;
	padding:20px;
	width:617px;
	text-align:center;
	box-shadow:5px 5px 40px rgba(0,0,0,0.5);
	background:white;
	overflow:hidden;
	
}

.helpus2:hover .paycode{
	display:block;
	color: #999;
}




.helpus3{
  display:block;
  overflow:hidden;
  //margin-top:10px;
  //margin-top:30px;
	color: #1982D1;
	text-decoration: none;

}
.helpus3:hover {
	color: orange;
	text-decoration: none;
}

.helpus3:link,
.helpus3:visited,
.helpus3:active {



	text-decoration:none;

	-webkit-transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;
	-moz-transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;
	-ms-transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;
	-o-transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;
	transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;

}

.helpus3:hover,
.helpus3:focus{
	color: orange;
	text-decoration: none;


	-webkit-transition: text-shadow 250ms ease-in 0ms, color 250ms ease-in 0ms;
	-moz-transition: text-shadow 250ms ease-in 0ms, color 250ms ease-in 0ms;
	-ms-transition: text-shadow 250ms ease-in 0ms, color 250ms ease-in 0ms;
	-o-transition: text-shadow 250ms ease-in 0ms, color 250ms ease-in 0ms;
	transition: text-shadow 250ms ease-in 0ms, color 250ms ease-in 0ms;
}
.helpus3{
	display:block;

	margin: 50px auto;
	text-decoration:none;
	color:white;
	font-size:12px;
	line-height:1.8;
	
	background: url(http://www.alloyteam.com/wp-content/uploads/2017/03/paybutton2.png) no-repeat center  #fff;
	background-size:cover;
	width: 220px;
	height: 80px;
border:1px solid rgba(0,0,0,0);
	border-radius: 10px;
	
	
}
.helpus3:hover{
	border-radius: 10px 10px 0 0;
	color:white;
}
.helpus3 .pay{
	display:none;
	position:relative;
	z-index:100;
	margin: 80px 0 0 0px;
	padding:10px;


	width:200px;

	background:#cd533d;
	overflow:hidden;
	
}

.helpus3:hover .pay{
	display:block;
}

.helpus3 .pay img{
	width:200px;
}