CSS 网页弹出微信二维码
Posted zolty
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS 网页弹出微信二维码相关的知识,希望对你有一定的参考价值。
1.在html中添加需要弹出的位置
在需要展示二维码的地方添加如下代码,其中标签内容可以根据需要修改成图片等。例如“查看我的微信”。
href=”javascript:”表示标签作为按钮使用,但实际不做跳转,实现url访问拦截。
<a class="facebook weixin" href="javascript:">
<i class="fab fa-weixin">查看我的微信</i>
</a>
2.在样式表style.css中添加如下代码
其中URL为图片的相对地址: images/ego.jpg 。
首先父元素添加相对定位,然后以”:after” 伪元素在元素的内容之后插入微信二维码;transform: scale(0)和opacity: 0实现二维码隐藏。weixin:hover::after 当鼠标经过时显示二维码。
/*微信二维码*/
.weixin
position:relative;
.weixin::after
content: url(images/ego.jpg);
position: absolute;
right: -28px;
top: -135px;
z-index: 99;
width: 420px;
height: 420px;
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;
.weixin:hover::after
transform:scale(1);
opacity: 1;
以上是关于CSS 网页弹出微信二维码的主要内容,如果未能解决你的问题,请参考以下文章