特性

1.纯CSS实现二维码显示功能，减少加载JS；

2.使用CSS3转换属性；

步

在需要显示二维码的地方添加如下代码，标签A的内容可以根据需要修改成图片，href="JavaScript : "表示标签A作为按钮使用，不跳转，实现url访问拦截。

a class=' weixin ' href=' JavaScript : '

微信

/a

第二步

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

/*微信二维码*/

a.weixin {

相对位置：

}

. weixin:after {

content : URL(images/QR code . gif)；

位置：

right :-28px；

top :-135 px；

z-index : 99；

width: 120px

height: 120px

border: 5px固体# 0095ba

border-radius : 4px；

-webkit-transform-origin:右上角；

transform-origin:右上角；

-webkit-transform:秤(0)；

transform:标度(0)；

opa city 3360 0；

-web kit-transit : all . 4s easy-in-out；

transit : all . 4s easy-in-out；

}

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

第三步

另外，在style.css中添加以下代码

. weixin :悬停在： {之后

transform:比例尺(1)；

opa city 3360 1；

}

鼠标经过时显示二维码。

另一种方法(推荐)

上面的代码使用了伪类元素“:after”，将二维码文件引入到css中。事实上，我们也可以使用img标签将二维码图像放入html，结构如下：

a class=' social weixin ' href=' JavaScript : '

Img class='二维码' src='http://你的路径/二维码. gif' alt='微信二维码'

//这里是微信图标。

/a

自然的css样式也应该相应地改变，如下所示：

a.weixin {

相对位置：

}。weixin img.qrcode {

位置：

z-index : 99；

top :-135 px；

right :-28px；

宽度： 7.5雷姆；

更大宽度：无；

height: 7.5rem

transform:标度(0)；

transform-origin:右上角；

opa city 3360 0；

border : 3125 rem solid # 0085 ba；

border-radius : 25 rem；

-web kit-transit : all . 4s easy-in-out；

-o-transit : all . 4s easy-in-out；

transit : all . 4s easy-in-out；

}

. weixin:hover img.qrcode {

transform:比例尺(1)；

opa city 3360 1；

}

Transform-origin:定义二维码图片的弹出原点位置，其用法参照CSS3的Transform-origin属性

无论用哪种方法都可以实现鼠标悬停弹出二维码的功能，但是推荐第二种方法，因为容易修改二维码路径。