CSS 网页弹出微信二维码

Posted 2022-06-23 zolty

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;