给子比主题加一个实用美观可翻转的区块代码

温馨提示:本文最后更新于2023-12-16 01:40:18,某些文章具有时效性,若有错误或已失效,请在下方留言。

子比主题加一个翻转显示的区块代码,适合在网站侧边栏使用,我感觉还是比较美观的,并且代码是从张洪Heo大佬的站点上扒下来的,给大家分享一下!!!

效果展示

图片[1] - 给子比主题加一个实用美观可翻转的区块代码

使用教程

这个效果主要就是靠CSS,站长已经把相关代码放底部了
WordPress的话可以使用自定义HTML小工具,把下面的代码放至自定义HTML小工具

<div class="card-widget" id="card-wechat" onclick="window.open('https://www.tfbkw.com/demo/Wechat/');">
    <div id="flip-wrapper">
      <div id="flip-content">
      <div class="face"></div>
      <div class="back face"></div>
    </div></div></div>
<link rel="stylesheet" href="你的CSS路径或链接" rel="external nofollow"  type="text/css">

放置之前请修改CSS代码里的图片为你的,公众号二维码请自行替换(PS替换即可,方便快捷)

  • wechatface.png(翻转前图片)
  • wx_gzh.png(翻转后图片)
  • gzh_cover.png(微信Logo背景)

注:现在的绿色是代码原来的颜色,如需修改掉这个绿色可以在css里搜索【#57bd6a】,自行变更。

最后附上一个跳转的页面,效果如下

图片[2] - 给子比主题加一个实用美观可翻转的区块代码

美化的代码和跳转的页面都放在了下方,登入即可查看下载即可!!

源码下载

给子比主题加一个实用美观可翻转的区块代码 - 腾飞博客
给子比主题加一个实用美观可翻转的区块代码
此内容为免费资源,请登录后查看
0积分
免费资源
© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容