CSS 实现鼠标悬停弹出微信二维码

特点

1、纯 CSS 实现二维码展示功能，减少加载 JS；

2、使用 CSS3 transform 属性；

实现方法

我们可以利用 img 标签将二维码图片放在 a 标签链接中，为了防止跳转 href 超链接写 “javascript:void(0)“。结构如下：

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

同时 CSS 样式需要做相应的表现，如下：

/*页脚微信效果开始*/
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;
}
/*页脚微信效果结束