纯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 属性 无论使用哪一种方式都能够实现鼠标悬停弹出二维码功能,但是个人推荐使用第二种方法,因为这种方法很容易修改二维码路径。
【推荐资讯】 Recommended information