HTML5 CSS网站打赏功能实现及JS点赞效果源代码

网页代码 2021-11-30 15:27:53 0

分享一个点赞加打赏的特效、很久之前就想给博客加一个点赞的功能、但一直觉得找不到好的创意、这事就一直拖下来了、这几天也在网上找了一些想着的特效、有需要的可以前往看看 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>

点赞打赏代码.zip

点赞打赏源代码.zip (77.88 KB)