子比主题 – 侧边栏翻转显示二维码

美化说明

给子比主题添加一个翻转显示区块，适合网站侧边栏放二维码，个人感觉还是挺美观的

效果展示

代码部署

将下面的代码添加到 WordPress - 外观 - 小工具 - 自定义HTML

<div class="card-widget" id="card-wechat" onclick="window.open('https://www.teyonds.com');">
    <div id="flip-wrapper">
        <div id="flip-content">
            <div class="face"></div>
            <div class="back face"></div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="/wp-others/css/weixinhao.css" type="text/css">

使用教程

将下面的 CSS 代码添加到 子比主题设置 - 全局功能 - 自定义代码 - 自定义CSS样式

添加后替换 CSS 代码中的三张图片，默认背景为绿色，如需修改可以在 CSS 中搜索 #57bd6a

CSS 代码

@charset "UTF-8";

/* 主页卡片阴影 */
.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;
}

素材下载