昨天试了试微信的赞赏二维码，还不错，放博客上面说不定就有大佬给俺打赏了呢……

HTML代码，自己找地方放就好

<div class="support-author">
 <a class="support-btn" href="javascript:void(0)">打赏</a>
 <div class="support-content">
  <img src="图片地址" alt="微信打赏">
 </div>
</div>

CSS代码

.support-author{
  text-align: center;
  position: relative;
}
.support-author .support-btn{
  display: inline-block;
  padding: 8px 25px;
  color: #fff;
  background-color: #f05050;
  border: none;
  border-radius: 2px;
}
.support-btn:hover~.support-content{
  display: block;
}
.support-content{
  display: none;
  position: absolute;
  top: -310px;
  left: 0;
  right: 0;
}

考虑到移动端，直接就显示赞赏码

@media(max-width:767px) {
  .support-author .support-btn{
    display: none;
  }
  .support-content{
    display: block;
    position:static;
  }
}

差不多就完成了。