HTML5 CSS网站打赏功能实现及JS点赞效果源代码
分享一个点赞加打赏的特效、很久之前就想给博客加一个点赞的功能、但一直觉得找不到好的创意、这事就一直拖下来了、这几天也在网上找了一些想着的特效、有需要的可以前往看看 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>
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：http://www.tukus.cn/cyzd/caidan/189.html
上一篇：返回列表
