*~~
特点
~~ *
1、纯CSS实现二维码展示功能,减少加载JS;
2、使用CSS3 transform 属性;
第一步
在需要展示二维码的地方添加如下代码,其中标签内容可以根据需要修改成图片等,href=”javascript:”表示标签作为按钮使用,不做跳转,实现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” 伪元素在元素的内容之后插入微信二维码;transform: scale(0)和opacit