CSS點(diǎn)擊跳二維碼是一種常用的網(wǎng)頁(yè)交互方式，它可以讓用戶通過點(diǎn)擊頁(yè)面上的某個(gè)元素來展示二維碼圖案，方便用戶掃碼獲取相關(guān)內(nèi)容。下面介紹一下如何使用CSS來實(shí)現(xiàn)這個(gè)功能。

.qrcode {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
display: none;
}
.qrcode .close {
position: absolute;
top: -10px;
right: -10px;
font-size: 20px;
color: #666;
cursor: pointer;
}
.qrcode:before {
position: absolute;
content: "";
width: 130px;
height: 130px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url("qrcode.png") no-repeat center center;
background-size: contain;
}
.btn-qrcode {
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
height: 50px;
background: #333;
color: #fff;
text-align: center;
line-height: 50px;
border-radius: 50%;
cursor: pointer;
}
.btn-qrcode:hover {
background: #666;
}

首先是.qrcode的樣式，它代表二維碼的框體。position:fixed和top、left以及transform用來實(shí)現(xiàn)居中顯示，z-index用來控制它在頁(yè)面中的層級(jí)，display:none則是默認(rèn)不顯示。

.qrcode .close是關(guān)閉按鈕的樣式，它用到了絕對(duì)定位和top、right來讓它顯示在二維碼框體的右上角。

.qrcode:before則是用來展示二維碼的樣式，它利用了CSS3的:before偽元素來實(shí)現(xiàn)，background-size:contain讓它可以自適應(yīng)大小。

.btn-qrcode則是按鈕的樣式，它用到了position:fixed、right和bottom來讓它顯示在頁(yè)面的右下角。當(dāng)用戶鼠標(biāo)懸停在按鈕上時(shí)，它的背景會(huì)變暗。

在HTML中，只需要用一個(gè)或元素包裹住“掃一掃”或“二維碼”等文字即可。給這個(gè)元素一個(gè)class，例如btn-qrcode，然后在CSS中定義對(duì)應(yīng)的樣式就可以了。

最后，在JavaScript中通過添加事件監(jiān)聽器，當(dāng)用戶點(diǎn)擊這個(gè)按鈕時(shí)，就可以讓.qrcode元素的display屬性變成block，從而顯示出二維碼框體。