本文最后更新于2025年1月16日21:14 星期四，请注意资讯或者链接时效，如有失效请在文章评论区留言反馈。
闲来无事，互联网转悠，发现一个好玩的侧边翻转HTML推广小工具组件，可以用来推广微信公众号，赞赏，扫码领红包等扫码场景，而且点击可以跳转对应的链接，小编这里是支付宝扫码领红包，大家可以扫码试试，看看会不会领取到大鹅红包
![[aru_120]](https://img.bbblog.cn/wp-content/themes/dragon/assets/images/smilies/aru/120.png)
效果如本站侧边演示（手机端不可见），图示如下
-
- 翻转前
-
- 鼠标放上去自动翻转后
代码如下
- 侧边自定义HTML代码，点击跳转链接在这里可以设置
<div class="card-widget" id="card-wechat" onclick="window.open('https://img.bbblog.cn/wp-content/uploads/2025/01/20250113214136_67851810a2a9d.jpg');">
<div id="flip-wrapper">
<div id="flip-content">
<div class="face"></div>
<div class="back face"></div>
</div>
</div>
</div>- 如果不想点击跳转，只是翻转展示二维码，可以去掉跳转动作代码，之后代码如下：
<div class="card-widget" id="card-wechat">
<div id="flip-wrapper">
<div id="flip-content">
<div class="face"></div>
<div class="back face"></div>
</div>
</div>
</div>- css代码，图片素材在这里更换，放置之前请修改CSS代码里的图片为你的，二维码请自行替换（PS替换即可，方便快捷）注：现在的蓝色是代码原来的颜色，如需修改掉这个蓝色可以在css里搜索【#0e78ff】，自行变更，PS：如果鼠标移上去，不想跳转变成小手，可以将74行代码
pointer换成default
/* 主页卡片阴影 */
.card-widget {
box-shadow: 0 8px 16px -4px #2c2d300c;
background: #fff;
border: 1px solid #e3e8f7;
transition: 0.3s;
border-radius: 5px;
transition: 0.3s;
position: relative;
overflow: hidden;
margin-top: 0rem;
padding: 1rem 1.2rem;
}
/* 二维码翻转 */
#flip-wrapper {
position: relative;
width: 235px;
height: 110px;
z-index: 1;
}
#flip-content {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: cubic-bezier(0, 0, 0, 1.29) 0.3s;
}
#flip-wrapper:hover #flip-content {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: url(https://www.bbblog.cn/wp-content/themes/img/wechatface.webp) center center no-repeat;
background-size: 100%;
}
.back.face {
display: block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
box-sizing: border-box;
background: url(https://www.bbblog.cn/wp-content/themes/img/wx_gzh.png) center center no-repeat;
background-size: 100%;
}
/* 组件背景 */
.card-widget#card-wechat::before {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(https://www.bbblog.cn/wp-content/themes/img/zfbcover.webp) center center no-repeat;
content: '';
}
.card-widget#card-wechat {
background: #0e78ff;
display: flex;
justify-content: center;
align-content: center;
padding: 0;
cursor: pointer;
border: none;
height: 110px;
}
.card-widget#card-wechat img {
max-height: 110px;
object-fit: cover;
}
.friend-link {
display: flex;
justify-content: center;
align-content: center;
}使用方法
「点点赞赏，手留余香」
还没有人赞赏，快来当第一个赞赏的人吧！
给叭叭君打赏
予人玫瑰，手有余香
- 2￥
- 5￥
- 10￥
- 20￥
- 50￥
￥2
声明：本文为原创文章，版权归叭叭部落格所有，欢迎分享本文，转载请保留出处！
