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

csdn_zhujia

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

阅读量1.7k

点赞数

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

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

本文链接：https://blog.csdn.net/csdn_zhujia/article/details/120723532

版权

复制粘贴下边代码，根据需要更换图片路径，以及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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

csdn_zhujia

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
网站点击弹窗微信二维码功能纯CSS

复制粘贴下边代码，根据需要更换图片路径，以及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);tr..
复制链接

扫一扫