现在的位置:首页>wordpress>正文

纯CSS实现网站打赏功能和JS点赞效果的源代码

2016年07月28日 ⁄ 共 1952字 评论 4 条

网站的打赏功能,部落之前介绍过用代码和插件两种方法为WordPress站点添加微信打赏功能,也发现有不少朋友目前正在使用这个功能,部落自己也用过个功能一段时间,累计收到1.1元的微信零钱打赏.所以后来撤掉了这个功能,今天这里介绍一个纯CSS实现网站打赏功能,另外,还有一个JS点赞效果的源代码,大家需要的可以试一下.

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

纯CSS实现网站打赏功能和JS点赞效果的源代码

当然,这里部落提示一下,您觉得用得上的时候,可以搞一下,否则就没有必要去上这样的功能了,因为这两个功能,多少对网站的打开速度会有一定的影响.

纯CSS实现网站打赏功能

这里部落先说明一下,这个是在html5里实现的,Html代码内容如下:

  1. <body>
  2. <div class="thumbs_content">
  3.     <a href="javascript:void(0)" class="thumbs_button fa fa-thumbs-up" title="给你点个赞,支持一下"> 点赞</a>
  4.     <a href="javascript:void(0)" class="reward_button fa fa-money" title="一分钱也打赏,支持一下"> 打赏</a>
  5.     <span class="clear"></span>
  6. </div>
  7. </body>

CSS样式代码如下:

  1. <style type="text/css">
  2. .thumbs_content{
  3.     width291px;
  4.     margin: 0 auto;
  5. }
  6. .thumbs_button{
  7.     floatleft;
  8.     width:145px;
  9.     text-aligncenter;
  10.     margin:5px auto;
  11.     height45px;
  12.     line-height45px;
  13.     background-color:#444;
  14.     color:#fbfbfb;
  15.     text-align:center;
  16.     text-decoration:none;
  17.     font-weight:bold;
  18.     font-size:16px;
  19.     transition: all 0.3s;
  20.     border-radius: 0 0 0 25px;
  21.     -webkit-border-radius: 0 0 0 25px;
  22.     -moz-border-radius: 0 0 0 25px;
  23.     -o-border-radius: 0 0 0 25px;
  24. }
  25. .reward_button{
  26.     floatleft;
  27.     width:145px;
  28.     text-aligncenter;
  29.     margin:5px auto;
  30.     height45px;
  31.     line-height45px;
  32.     background-color:#cd4450;
  33.     color:#fbfbfb;
  34.     text-align:center;
  35.     text-decoration:none;
  36.     font-weight:bold;
  37.     font-size:16px;
  38.     border-left:1px solid #fbfbfb;
  39.     transition: all 0.3s;
  40.     border-radius: 0 25px 0 0;
  41.     -webkit-border-radius: 0 25px 0 0;
  42.     -moz-border-radius: 0 25px 0 0;
  43.     -o-border-radius: 0 25px 0 0;
  44. }
  45. .thumbs_button:hover, .reward_button:hover{
  46.     opacity:0.8;
  47.     font-size:18px;
  48. }
  49. .clear{
  50.     clear:both;
  51. }
  52. </style>

Css网站打赏及点赞功能下载链接:由此直达.提取码:d5x5

 

 

小结

这个部落没有去测试,方法来源自网络,需要的朋友,请自行测试,查看一下代码,感觉应该是没有什么问题的.

评论 4 条 评论内容很精采,有内幕,而且绝对有干货

  1. 香港云主机 2016年07月28日 17:22  @回复  Δ-49楼 回复

    网站打赏功能和JS点赞效果,正好网站上差这样的功能,今天来看到真的是赚了,不用去折腾了

  2. 我爱动感单车网 2016年07月28日 23:35  @回复  Δ-48楼 回复

    咱是真真切切用不上这个,所以,也就懒得折腾了。

  3. 购物街 2016年07月29日 10:41  @回复  Δ-47楼 回复

    谢谢分享

  4. 成都串串香加盟 2016年08月01日 11:21  @回复  Δ-46楼 回复

    又学了点新东西

给我留言