网站侧边栏添加精美的可翻转显示模块代码（本站同款）

前几天我偶然发现了一个非常实用、美观的翻转显示区块的代码，可以很好地用在网站的侧边栏上。由于它非常适合我的网站风格，并且我认为会对网站的访问者产生吸引力，我决定自己制作一个，分享给大家免费使用❤️‍🔥

演示GIF

这个翻转显示区块的代码实现其实起来并不难，只需要使用一些CSS代码就可以实现。
翻转显示区块实现步骤：
第一步，在想要展示的位置添加HTML，一般侧栏最好，里面的url为点击后跳转到的网页。

<!--
 * 网站侧栏翻转
 * @author 林尽欢
 * @version 2024.9.26
 * @link https://blog.linjinhuan.com
 -->
<div class="textwidget custom-html-widget"><div class="qqg-card-widget" id="qqg-card-wechat" onclick="window.open('https://blog.linjinhuan.com');">
    <div id="qqg-flip-wrapper">
      <div id="qqg-flip-content">
      <div class="qqg-face"></div>
      <div class="qqg-back qqg-face"></div>
    </div></div></div></div>

<div class="textwidget custom-html-widget"><div class="wx-card-widget" id="wx-card-wechat" onclick="window.open('https://blog.linjinhuan.com.com');">
    <div id="wx-flip-wrapper">
      <div id="wx-flip-content">
      <div class="wx-face"></div>
      <div class="wx-back wx-face"></div>
    </div></div></div></div>
<br>

第二步，添加CSS到全局css文件中，添加之后需要修改图片url地址，素材图片在附件下载。

此处内容，需回复之后可见

第三步，下载附件图片素材上传到服务器，并修改css里面的url就行了，F5刷新就可以看到效果了。

素材下载，密码:hk14

转自：六月是只猫