HTML5 CSS网站打赏功能实现及JS点赞效果源代码
2016-06-23 13:01:55  By: dwtedx

分享一个点赞加打赏的特效、很久之前就想给博客加一个点赞的功能、但一直觉得找不到好的创意、这事就一直拖下来了、这几天也在网上找了一些想着的特效、有需要的可以前往看看 jQuery微信支付宝打赏插件、但都不是很满意、总感觉那里不对、然后呢就自己试着写了一个

写程序的对于界面上的那些事总是少那么点、现在我写出来的这款点赞和打赏的插件个人觉得还是不错、起码自己很满意、主要是用 CSS 和 Font Awesome图标 开发的、现在就把这个小功能分享给大家、有类似需求的朋友可以下载使用、可以在我博客的文章页找到效果、效果图片如下

网站打赏功能


Html代码

<body>
<div class="thumbs_content">
    <a href="javascript:void(0)" class="thumbs_button fa fa-thumbs-up" title="点赞,支持一下"> 点赞</a>
    <a href="javascript:void(0)" class="reward_button fa fa-money" title="打赏,支持一下"> 打赏</a>
    <span class="clear"></span>
</div>
</body>


CSS代码

<style type="text/css">
.thumbs_content{
    width: 291px;
    margin: 0 auto;
}
.thumbs_button{
    float: left;
    width:145px;
    text-align: center;
    margin:5px auto;
    height: 45px;
    line-height: 45px;
    background-color:#444;
    color:#fbfbfb;
    text-align:center;
    text-decoration:none;
    font-weight:bold;
    font-size:16px;
    transition: all 0.3s;
    border-radius: 0 0 0 25px;
    -webkit-border-radius: 0 0 0 25px;
    -moz-border-radius: 0 0 0 25px;
    -o-border-radius: 0 0 0 25px;
}
.reward_button{
    float: left;
    width:145px;
    text-align: center;
    margin:5px auto;
    height: 45px;
    line-height: 45px;
    background-color:#cd4450;
    color:#fbfbfb;
    text-align:center;
    text-decoration:none;
    font-weight:bold;
    font-size:16px;
    border-left:1px solid #fbfbfb;
    transition: all 0.3s;
    border-radius: 0 25px 0 0;
    -webkit-border-radius: 0 25px 0 0;
    -moz-border-radius: 0 25px 0 0;
    -o-border-radius: 0 25px 0 0;
}
.thumbs_button:hover, .reward_button:hover{
    opacity:0.8;
    font-size:18px;
}
.clear{
    clear:both;
} 
</style>


Css网站打赏及点赞功能下载链接: 网站打赏功能代码 密码: ar27

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+