CSS实现鼠标经过网页图标弹出微信二维码

最新推荐文章于 2024-09-13 11:44:26 发布

原创

最新推荐文章于 2024-09-13 11:44:26 发布 · 5k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

本文介绍了如何使用CSS纯技术实现在网页上鼠标悬停图标时弹出微信二维码的功能。通过CSS3的transform属性和伪类选择器，避免了额外的JavaScript加载，简化了实现过程。文中提供了两种实现方式，包括使用`:after`伪元素和直接使用`img`标签，并建议使用后者，以便更方便地修改二维码图片路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

*~~

特点

~~ *
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)和opacity: 0实现二维码隐藏。