子比美化 第7页
子比主题美化相关教程
分类
排序
2026-02-07
评论可见
子比主题 – 动态时钟与问候语小工具-识趣者资源

子比主题 – 动态时钟与问候语小工具

演示图 [hidecontent type="reply"] <div class="dynamic-greeting"> <div class="time-section"> <div class="time-display"> <span id="hours">00</span> <span class="colon">:</span> <span id="minutes">00</span> <span class="colon">:</span> <span id="seconds">00</span> </div> <div class="date-display" id="date"></div> </div> <div class="greeting-section"> <div class="greeting-text" id="greeting"></div> <div class="greeting-tip" id="tip"></div> </div> </div> <style>...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比主题 – 动态背景符号元素效果-识趣者资源

子比主题 – 动态背景符号元素效果

第一步 首先我们将下面的代码放到：子比主题–>>自定义底部HTML代码即可！ [hidecontent type="reply"] <link rel="stylesheet" href="/wp-content/themes/zibll/css/tengfei/yuansufuhao.css" /> <script>$('head').before('<div class="container1"><div class="inner-container1"><div class="shape"></div></div><div class="inner-container1"><div class="shape"></div></div></div>');</script> <script>$(document).ready(function(){var html='';for(var i=1;i<=50;i++){html+='<div class="shape-container--'+i+' shape-animation"><div class="random-shape"></div></div>'}document.querySelector('.shape').innerHTML+=html});</script> [/hidecontent] 第二步 我们将附件直接下载然后在：/wp-content/themes/zibll/目录下上传，也就是子比根目录 [hidecontent type="reply"] 动态元素符合背景样式1.zip下载 [/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化 – 网站鼠标样式美化-识趣者资源

子比美化 – 网站鼠标样式美化

教程： 可自行去网上下载个喜欢的鼠标样式，可以是图片可以是cur格式，自行将鼠标样式上传至某个目录，修改下面代码内的链接/路径既可。 [hidecontent type="reply"] 网站后台->Zibll主题设置->全局&功能->自定义代码->自定义CSS样式 /*鼠标样式修改开始*/ body { cursor: url(无链接时鼠标样式文件路径), default; } a:hover, .cursor:hover, button:hover, svg:hover { cursor: url(有链接时鼠标样式文件路径), pointer; } /*鼠标样式修改结束*/ 鼠标样式猫爪下载 [/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-给文章标题文字添加彩色渐变效果-识趣者资源

子比美化-给文章标题文字添加彩色渐变效果

演示图 教程 把下面代码放到后台自定义CSS [hidecontent type="reply"] /*文章标题加上渐变彩色文字 开始*/ .item-heading :hover, .text-ellipsis :hover, .text-ellipsis-2 :hover, .links-lists :hover { background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: maskedAnimation...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-幻灯片底部虚化-识趣者资源

子比美化-幻灯片底部虚化

教程 放到后台自定义CSS [hidecontent type="reply"] .absolute::before { content: ''; display: block; position: absolute; left: 0; top: 58%; right: 0; bottom: 0; transform: scale(1.01); background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, var(--body-bg-color) 100%); } [/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-给首页左侧添加联系站长按钮-识趣者资源

子比美化-给首页左侧添加联系站长按钮

演示图 教程 放到后台自定义代码-自定义头部HTML [hidecontent type="reply"] <style> @keyframes shangxa { 0%, 100%, 20%, 50%, 80% { transition-timing-function: cubic-bezier(0.215,.61,.355,1); transform: translate3d(0,0,0); } 40%, 43% { transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060); transform: translate3d(0,-10px,0); } 70% { transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); transform: translate3d(0,-6px,0); }...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-评论框添加背景图片-识趣者资源

子比美化-评论框添加背景图片

演示图 教程： 放到后台自定义CSS [hidecontent type="reply"] /*评论背景图*/ textarea#comment { background-color:transparent; background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://47zhe.cn/img/pinglun.gif) right 10px bottom 0px no-repeat; background-size: contain; -moz-transition:ease-in-out 0.45s; -webkit-transition:ease-in-out 0.45s; -o-transition:ease-in-out 0.45s; -ms-transition:ease-in-out 0.45s; transition:ease-in-out 0.45s;} textarea#comment:focus...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-粉色细节优化-识趣者资源

子比美化-粉色细节优化

教程 后台自定义CSS [hidecontent type="reply"] /*粉色细节优化*/ .navbar-top .navbar-right .sub-menu { -webkit-box-shadow: 0 1px 4px 0 #ef71b2 inset; -moz-box-shadow: 0 1px 4px 0 #ef71b2 inset; box-shadow: inset 0 1px 4px 0 #ef71b2; } .posts-item.card{ -webkit-box-shadow: 0 1px...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-侧边栏用户信息展示小工具美化-识趣者资源

子比美化-侧边栏用户信息展示小工具美化

给小工具头部添加一个猫耳朵吧！ 教程： 放到后台自定义CSS [hidecontent type="reply"] .sidebar { height: auto; padding: 50px 0px 0px; background: url(图片链接) center top / 100% no-repeat; transform: translate3d(0px, 0px, 0px); } 猫耳朵图片下载 [/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-文章卡片下载按钮样式美化-识趣者资源

子比美化-文章卡片下载按钮样式美化

演示图 教程： 首先一共三步，有两行php代码和一个css代码，话不多说直接开始教程 [hidecontent type="reply"] 步骤一： 下面的PHP代码放到子比文件：/wp-content/themes/zibll/inc/functions/zib-posts-list.php的大概268行，如下图 $get_permalink = get_permalink();//添加文章链接 步骤二： 下面的PHP代码放到子比文件：/wp-content/themes/zibll/inc/functions/zib-posts-list.php的大概310行，如下图 $html = '<a class="down" target="_blank" href="' . $get_permalink . '">下载</a>';//添加下载按钮 步骤三： 添加CSS代码 background: linear-gradient(to right, #4f6dee, #67bdf9);这个是颜色，自己需求改 下面代码直接放到后台css里即可 /*文章卡片下载按钮*/ a.down { display: inline-block;...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-悬浮按钮猫耳朵-识趣者资源

子比美化-悬浮按钮猫耳朵

教程: 将下面CSS代码加入到后台CSS里即可 [hidecontent type="reply"] /*悬浮按钮猫耳朵*/ .dropdown-menu { margin-bottom: 10px; border: none; box-sizing: border-box; padding: 25px 12px 50px; border-radius: 8px; background: url(图片链接) no-repeat 50%; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100%; } .float-btn.qrcode-btn .hover-show-con...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-添加最新通知模块小工具-识趣者资源

子比美化-添加最新通知模块小工具

演示图 教程： 在后台–>外观–>小工具–>自定义HTML，把自定义HTML放到合适的位置，然后把下面代码复制粘贴进去，即可在前台显示 [hidecontent type="reply"] <div class="zhankr-zx"> <span>NEWS</span> <div class="zhankr-zx-n"> <strong>最新</strong> <strong>通知</strong> </div> </div> <div class="zhankr-zx-n"> <center> <strong>如果您邮箱是QQ邮箱,注册或登录时邮箱收不到验证码</strong><br> <strong>可能是近期官方邮件发送过多,请查看QQ邮箱-垃圾箱</strong> </center> </div> <style> .zhankr-zx { position: relative; margin-bottom: 18px; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack:...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化 – 评论区增加开通会员按钮-识趣者资源

子比美化 – 评论区增加开通会员按钮

演示图 教程 [hidecontent type="reply"] </button> <a class="but c-red btn-input-expand input-image mr6 pay-vip"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-vip_1"></use></svg><span class="hide-sm">加入VIP</span> </a> [/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-分页按钮美化-识趣者资源

子比美化-分页按钮美化

演示图 把下面代码放到后台自定义CSS [hidecontent type="reply"] /*页码样式微调*/ .pagenav .current, .pagenav .page-numbers, .pagenav a { border: 0; padding: 8px 14px; background: linear-gradient(148deg, hsla(0, 0%, 100%, 0), var(--main-bg-color)); -webkit-box-shadow: 0 0 8px 0 rgba(95, 95, 95, .15); box-shadow: 0...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-头像呼吸光环和鼠标悬停旋转放大代码-识趣者资源

子比美化-头像呼吸光环和鼠标悬停旋转放大代码

演示图 教程 放到后台自定义代码-自定义css即可 [hidecontent type="reply"] /*头像呼吸光环和鼠标悬停旋转放大开始*/ .avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
1…56789…23跳转