本篇的目的是实现鼠标经过微信图标，显示微信二维码的功能，总结思路和相关知识点。

• 思路：

1. 使用img标签，并使用一个href为空的a标签作为img标签的父元素。
2. 父元素使用相对定位，img标签为子元素是绝对定位，z轴设置一个较大数，并且使用opacity为0将其隐藏起来。
3. 使用一个icon作为微信图标，也放在a标签里。
4. 当鼠标移动到该图标上时，img标签的opacity变为1，显示这个元素。
5. 动画效果，css3缩放：
   scale(x,y) 对元素进行缩放
   X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数
   Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数
   一样的。并以X为准。

注意：被scale放大的元素,看起来很大,但是实际占据的位置还是原来的大小。

6. 考虑兼容性。

代码如下：

<a href="#" class="weixin"><img class="qrcode" src="./assets/images/myWechat.jpg" alt="微信二维码"><i class="lni lni-wechat"></i>
</a>

.weixin {position: relative;
}.weixin img.qrcode {position: absolute;z-index: 99;top: -200px;left: 15px;width: 170px;max-width: none;height: 200px;transform: scale(0);transform-origin: bottom left;opacity: 0;border-radius: 10px;border-bottom-left-radius: 0;-webkit-transition: all .4s ease-in-out;-o-transition: all .4s ease-in-out;transition: all .4s ease-in-out;
}.weixin:hover img.qrcode {transform: scale(1);opacity: 1;}

效果图：

参考来源：
css3的transform中scale缩放详解
CSS实现鼠标经过网页图标弹出微信二维码
该文章还写了另一种伪元素的实现方法，可以看看。