为网站添加 微信/支付宝 打赏功能 代码通用版!

为网站添加 微信/支付宝 打赏功能 代码通用版!

2017年1月14日 19:45 技术控
2 19
老司机站长利器:WordPress文章部分隐藏内容 输入密码可见!
#支付宝集五福# 超强攻略!每日可得三个福字!附如何额外多次领福方法!

为网站添加 微信/支付宝 打赏功能 代码通用版!

最近这阵子一直在折腾网站的样式,没事去其他地方看看有没有好的功能或者版式,喜欢就拿来改改用用,今天给大家分享的一个给网站添加打赏的功能!因为没有使用WP的函数,直接使用CSS实现的,所以所有的网站都可以拿去使用!效果如下:

为网站添加 微信/支付宝 打赏功能 代码通用版!

代码部分

/* Name: 微信/支付宝 打赏功能
* 屌丝青年网(www.dsqnw.com) */
<div class="reward">
<div class="reward-button">赏 <span class="reward-code"> 
<span class="alipay-code"> <img class="alipay-img" src="200px*200px支付宝图片"><b>支付宝扫码打赏</b> </span> 
<span class="wechat-code"> <img class="wechat-img" src="200px*200px微信图片"><b>微信打赏</b> </span> </span>
</div>
<p class="reward-notice">如果文章对您有帮助,欢迎移至上方按钮打赏屌丝青年</p>
</div>

CSS样式部分

/* Name: 微信/支付宝 打赏功能
* 屌丝青年网(www.dsqnw.com) */
.reward{padding:5px 0}.reward .reward-notice{font-size:14px;line-height:14px;margin:15px auto;text-align:center}
.reward .reward-button{font-size:28px;line-height:58px;position:relative;display:block;width:60px;height:60px;margin:0 auto;padding:0;-webkit-user-select:none;text-align:center;vertical-align:middle;color:#fff;border: 1px solid #E62129;border-radius:50%;background: #E62129;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#E62129),color-stop(100%,#2989d8),color-stop(100%,#2989d8),color-stop(100%,#207cca));background: -webkit-linear-gradient(top,#E62129 0,#2989d8 100%,#2989d8 100%,#207cca 100%);background: linear-gradient(to bottom,#F0343C 0,#E62129 100%,#2989d8 100%,#207cca 100%);}
.reward .reward-code{position:absolute;top: -250px;left:50%;display:none;width:350px;height: 170px;margin-left: -190px;padding:15px;border:1px solid #e6e6e6;background:#fff;box-shadow:0 1px 1px 1px #efefef;}
/* 因为每个网站文章宽度不同,所以需要根据自己网站的实际情况调整上行CSS代码的 top和margin-left的数值 来适应自己的网站 */
.reward .reward-button:hover .reward-code{display:block}
.reward .reward-code span{display:inline-block;width:150px;height:150px}
.reward .reward-code span.alipay-code{float:left}
.reward .reward-code span.alipay-code a{padding:0}
.reward .reward-code span.wechat-code{float:right}
.reward .reward-code img{display:inline-block;float:left;width:150px;height:150px;margin:0 auto;border:0}
.reward .reward-code b{font-size:14px;line-height:26px;display:block;margin:0;text-align:center;color:#666}
.reward .reward-code b.notice{line-height:2rem;margin-top:-1rem;color:#999}
.reward .reward-code:after,.reward .reward-code:before{position:absolute;content:'';border:10px solid transparent}
.reward .reward-code:after{bottom:-19px;left:50%;margin-left:-10px;border-top-color:#fff}
.reward .reward-code:before{bottom:-20px;left:50%;margin-left:-10px;border-top-color:#e6e6e6}
文章总数
2236+
标签总数
1965+
评论总数
11755+
运营天数
1156+