本站停止维护,已转移至laravel学习网;欢迎大家移步访问!

[分享]为网站添加 微信/支付宝 打赏功能H5版本

作为程序猿,很多同学都想折腾一个自己的博客或者论坛,方便大家记录自己的笔记,同时也是分享给别人,同时呢,我们看到很多朋友都开通了自己的打赏,也会为自己带来一点回报以及支付自己的服务器等费用,那么我今天来分享一个纯CSS实现的打赏功能,所以所有的网站都可以拿去使用!我们先看一下效果:

屏幕快照 2017-01-15 下午12

一.css代码

<style type="text/css">
		.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}
	</style>

二. html代码:

<div class="reward" style="margin-top: 300px;">
	<div class="reward-button">赏 <span class="reward-code"> 
	<span class="alipay-code"> <img class="alipay-img" src="IMG_0455.jpg"><b>支付宝扫码打赏</b> </span> 
	<span class="wechat-code"> <img class="wechat-img" src="IMG_0455.jpg"><b>微信打赏</b> </span> </span>
	</div>
	<p class="reward-notice">如果文章对您有帮助,欢迎移至上方按钮打赏一沙网</p>
</div>

大家搬过去就可以了,我是雷锋,不用谢我


转载请注明 :一沙网络原文出处:http://bbs.earnp.com/article/319
问题交流群 :562864481
0
打赏
发布时间 :2017-01-15 12:18:38
分享

0 个评论

    还没有评论,感觉来抢沙发吧!

要回复文章请先登录注册