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 网页弹出微信二维码相关推荐

CSS实现鼠标经过网页图标弹出微信二维码
特点 1.纯CSS实现二维码展示功能,减少加载JS: 2.使用CSS3 transform 属性: ## 第一步在需要展示二维码的地方添加如下代码,其中<a>标签内容可以根据需要修改成图 ...
微信长按图片无法弹出识别二维码选项解决方案
1.首先页面中有两个二维码的兄弟别忙活了,一个页面中只可以识别其中一个二维码,两个的话需提示用户双击放大二维码进行二维码识别. 2.网页内有一张图片进行二维码识别时长按没有反应(长按图片无法弹出识别二 ...
IOS手机长按图片无法弹出识别二维码
在 h5 中长按图片二维码会弹出识别结果,有保存.分享.以及二维码中包含的跳转链接等,会引导我们点击跳转.当小程序中使用 web-view 嵌套时,该图片亦能长按识别. 以上功能在安卓上没有问题,但是 ...
网页分享功能支持微信二维码 qq空间 qq好友新浪微博百度贴吧豆瓣人人...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
微信二维码1-服务号推广（将网页存储为图片存储到服务器）
本周预告了将会推出一个「将会讲讲项目中关于微信二维码生成和传播的事儿」的系列,现在我们就来开始讲讲: 首先本篇不会将会怎么调用二维码接口,因为该接口已经在上个月就写好了,在实际项目中,不过这个是微信二 ...
网站点击弹窗微信二维码功能纯CSS
复制粘贴下边代码,根据需要更换图片路径,以及css. <html> <head> <style> body { text-align:center; } .w ...
微信网页开发-长按二维码无法识别问题解决
微信网页开发-长按二维码无法识别问题解决参考文章: (1)微信网页开发-长按二维码无法识别问题解决 (2)https://www.cnblogs.com/Tylerrrkd/p/9153949.ht ...
微信小程序自定义弹框+生成二维码功能
最近在做小程序的功能,需求是弹框生成二维码功能,所以根据需求自定义了一个弹框组件,后续其他地方也可以用到. 最后效果图如下 dialog部分 <!--components/dialog/dial ...
java微信二维码登录
1.注册微信开放平台:https://open.weixin.qq.com 2.邮箱激活 3.完善开发者资料 4.开发者资质认证准备营业执照,1-2个工作日审批.300元 5.创建网站应用提交审 ...

CSS 网页弹出微信二维码

1.在HTML中添加需要弹出的位置

2.在样式表style.css中添加如下代码

CSS 网页弹出微信二维码相关推荐

最新文章

热门文章