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实现⼆维码隐藏。
css鼠标点击样式
## 第三步
同样在style.css中添加如下代码
.weixin:hover::after{
transform:scale(1);
opacity: 1;
}
当⿏标经过时显⽰⼆维码。
## 另⼀种⽅法(推荐)
上⾯的代码中使⽤了”:after”伪类元素，是在css中引⼊⼆维码⽂件，其实我们也可以利⽤img标签将⼆维码图⽚放在html中，结构如下：<a class="social weixin" href="javascript:">
<img class="qrcode" src="你的路径/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 属性
⽆论使⽤哪⼀种⽅式都能够实现⿏标悬停弹出⼆维码功能，但是个⼈推荐使⽤第⼆种⽅法，因为这种⽅法很容易修改⼆维码路径。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。