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 屬性
不管使用哪種方式都可以實現鼠標懸停彈出二維碼功能，可是我的推薦使用第二種方法，由於這種方法很容易修改二維碼路徑。