美观趣味性十足的侧边HTML小工具之翻转扫码

本文最后更新于2025年1月16日21:14 星期四，请注意资讯或者链接时效，如有失效请在文章评论区留言反馈。

闲来无事，互联网转悠，发现一个好玩的侧边翻转HTML推广小工具组件，可以用来推广微信公众号，赞赏，扫码领红包等扫码场景，而且点击可以跳转对应的链接，小编这里是支付宝扫码领红包，大家可以扫码试试，看看会不会领取到大鹅红包 [aru_120]

效果如本站侧边演示（手机端不可见），图示如下

: 翻转前

: 鼠标放上去自动翻转后

代码如下

侧边自定义HTML代码，点击跳转链接在这里可以设置

<div class="card-widget" id="card-wechat" onclick="window.open('https://www.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;
}