CSS实现鼠标经过网页图标弹出微信二维码
纯CSS实现二维码展示功能，减少加载JS
第一种方法
第一步
在需要展示二维码的地方添加如下代码，其中标签内容可以根据需要修改成图片等,href=”javascript:”表示标签作为按钮使用，不做跳转，实现url访问拦截。
<a class="facebook weixin" href="javascript:">
<i class="fab fa-weixin"></i>
</a>第二步在样式表style.css中添加如下代码
<style>
/*微信二维码*/
.weixin{
position:relative;
}
.weixin::after{
content: url(/static/images/weixin.jpg);
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;
}
.weixin:hover::after{
transform:scale(1);
opacity: 1;
}
</style>效果
第二种方法
上面的代码中使用了”:after”伪类元素，是在css中引入二维码文件，其实我们也可以利用img标签将二维码图片放在html中，结构如下：
<a class="facebook weixin" href="javascript:">
<img class="qrcode" src="/static/images/weixin.jpg" alt="微信二维码">
<i class="fab fa-weixin"></i>
</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 属性 无论使用哪一种方式都能够实现鼠标悬停弹出二维码功能，但是个人推荐使用第二种方法，因为这种方法很容易修改二维码路径。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年08月03日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读