鼠标悬停展示二维码

其实这真的是很简单的一个代码，但是百度搜一下觉得展示出来的那些一个比一个复杂。文章源自原紫番博客-https://www.yuanzifan.com/54352.html

而且有的还是CSS3以及HTML5之前时代的代码。文章源自原紫番博客-https://www.yuanzifan.com/54352.html

代码如下，HTML部分：文章源自原紫番博客-https://www.yuanzifan.com/54352.html

<!-- 自己加的页脚微信展示开始 -->
<a id="weixin" href="javascript:void(0)">
<i class="fa fa-weixin"></i>
<img src="http://你的路径/qrcode.jpg">
</a>
<!-- 自己加的页脚微信展示结束 -->

CSS部分：文章源自原紫番博客-https://www.yuanzifan.com/54352.html

a#weixin {
position: relative;
}
#weixin img {
visibility: hidden;
opacity: 0;
transform: translate(0, 10px);
transition: all 0.3s ease-in-out;
position: absolute;
right: -30px;
bottom: 40px;
width: 150px;
height: 150px;
}
#weixin:hover img {
visibility: visible;
transform: translate(0, 0px);
opacity: 1;
}