CSS实现鼠标通过网页图标弹出微信二维码

 特色

一、纯CSS实现二维码展现功能，减小加载JS；

二、使用CSS3 transform 属性；

## 第一步

在须要展现二维码的地方添加以下代码，其中<a>标签内容能够根据须要修改为图片等,href=”javascript:”表示<a>标签做为按钮使用，不作跳转，实现url访问拦截。

<a class="weixin" href="javascript:">
wechat
</a>

 

## 第二步

在样式表style.css中添加以下代码

/*微信二维码*/
.weixin{
position:relative;
}
.weixin::after{
content: url(images/qrcode.gif);
position: absolute;
right: -28px;
top: -135px;
z-index: 99;
width:120px;
height: 120px;
border: 5px solid #0095ba;
border-radius: 4px;
transform-origin: top right;
transform: scale(0);
opacity: 0;
-webkit-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

 

首先父元素添加相对定位，而后以”:after” 伪元素在<a></a>元素的内容以后插入微信二维码；transform: scale(0)和opacity: 0实现二维码隐藏。

## 第三步

一样在style.css中添加以下代码

.weixin:hover::after{
transform:scale(1);
opacity: 1;
}

 

当鼠标通过时显示二维码。

## 另外一种方法(推荐)

上面的代码中使用了”:after”伪类元素，是在css中引入二维码文件，其实咱们也能够利用img标签将二维码图片放在html中，结构以下：

<a class="social weixin" href="javascript:">
<img class="qrcode" src="http://你的路径/qrcode.gif" alt="微信二维码">
此处为微信图标
</a>

 

天然css样式也要作相应的改变，以下：

.weixin {
position: relative;
}

.weixin img.qrcode {
position: absolute;
z-index: 99;
top: -135px;
right: -28px;
width: 7.5rem;
max-width: none;
height: 7.5rem;
transform: scale(0);
transform-origin: top right;
opacity: 0;
border: .3125rem solid #0085ba;
border-radius: .25rem;
-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;
}

 

transform-origin: 定义二维码图片弹出原点位置，其用法参考CSS3 transform-origin 属性
不管使用哪种方式都可以实现鼠标悬停弹出二维码功能，可是我的推荐使用第二种方法，由于这种方法很容易修改二维码路径。