网站点击弹窗微信二维码功能纯CSS

csdn_zhujia

已于 2022-07-02 10:00:52 修改

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css html 小程序

于 2021-10-12 14:58:21 首次发布

本文链接：https://blog.youkuaiyun.com/csdn_zhujia/article/details/120723532

这篇博客提供了一段HTML和CSS代码，用于在网站上实现点击图片后弹出微信二维码的效果。用户可以自定义图片路径和CSS样式，通过设置hover状态改变二维码的显示和隐藏，达到平滑过渡的视觉体验。

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

复制粘贴下边代码，根据需要更换图片路径，以及css。

<html>
<head>
<style>
body {
text-align:center;
}
.weixin {
position: relative;
}
.weixin img.qrcode {
position: absolute;
z-index: 99;
width: 7.5rem;
max-width: none;
height: 7.5rem;
transform: scale(0);
transform-origin: top center;
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;
margin-top: 80px;
margin-left: -25px;
}
.weixin:hover img.qrcode {
transform: scale(1);
opacity: 1;
}
</style>
</head>
<body>
<a class="social weixin" href="javascript:">
<img class="qrcode" src="http://www.baidu.com/123.png" alt="联系方式">
<img src="/tan.png" alt="微信二维码" style="width: 70px;">
</