子比主题-侧边栏添加关注公众号卡片

效果预览

图片[1]-子比主题-侧边栏添加关注公众号卡片

美化步骤

模块配置,侧边栏添加自定义html

<div class="textwidget custom-html-widget">
    <style scoped>
        /* 主页卡片阴影 */

        .card-widget {
            box-shadow: 0 8px 16px -4px #2c2d300c;
            background: #fff;
            border: 1px solid #e3e8f7;
            transition: 0.3s;
            border-radius: 12px;
            transition: 0.3s;
            position: relative;
            overflow: hidden;
            margin-top: 1rem;
            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://img.lovelu.top/hexo-blog/img/wechatface.png) 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://img.lovelu.top/hexo-blog/img/wx_gzh.webp) 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://img.lovelu.top/hexo-blog/img/gzh_cover.png) center center no-repeat;
            content: '';
        }

        .card-widget#card-wechat {
            background: #57bd6a;
            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;
        }
    </style>
    <div class="card-widget" id="card-wechat" onclick="window.open('https://huliku.com/demo/weixinhao/');">
        <div id="flip-wrapper">
            <div id="flip-content">
                <div class="face"></div>
                <div class="back face"></div>
            </div>
        </div>
    </div>
</div>
- - - - - 本页内容已结束,喜欢请分享 - - - - -

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞377 分享
评论 抢沙发
头像
你这么聪明,说什么都对!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容