CSS實現鼠標經過網頁圖標彈出微信二維碼

 特點

1、純CSS實現二維碼展示功能，減少加載JS；

2、使用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 屬性
無論使用哪一種方式都能夠實現鼠標懸停彈出二維碼功能，但是個人推薦使用第二種方法，因為這種方法很容易修改二維碼路徑。