建站笔记

子比主题 - notyf提示框扫光效果美化-汇聚访

实用子比主题 – notyf提示框扫光效果美化

今天逛别人站点的时候，发现这个效果很好看，于是就扒了下来，今天就分享给大家吧！原作者是墨星哈！ 演示效果： 代码部署： [hidecontent type="payshow"] 复制下面css代码 进入子比主题设置-全局-自定义代码-自定义css代码 .notyf{border-radius:var(--main-radius) 0 0 var(--main-radius);position:relative;overflow:hidden;backdrop-filter:blur(8px);box-shadow:0 8px 32px rgba(0,0,0,0.1);transition:all 0.3s ease}.notyf:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,0.2)}@keyframes ripple{0%{background-position:0% 50%;box-shadow:0 0 25px rgba(255,255,255,0.4)}50%{background-position:100% 50%;box-shadow:0 0 40px rgba(255,255,255,0.5)}100%{background-position:0% 50%;box-shadow:0 0 25px rgba(255,255,255,0.4)}}@keyframes shine{0%{transform:translateX(-100%) translateY(-100%) rotate(25deg);opacity:0}25%{opacity:0.5}75%{opacity:0.5}100%{transform:translateX(100%)...
建站笔记
09213
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 会员引导悬浮窗[代码版]-汇聚访

实用子比主题 – 会员引导悬浮窗[代码版]

之前有倦意大佬发过插件版本的，今天分享一下代码版本的吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 放自定义顶部或底部html都可以，也可以放文件里，都随意！图片可自行更换哦~ <!-- Made by Juanyi --> <!-- 和子比有兼容问题的记得注释掉，如果没引用Jquery记得把注释取消 --> <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> --> <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.5/js.cookie.js"></script> <style> /* 活动背景图片 */ .vip-login-tip { background-image: url(https://pic1.imgdb.cn/item/6900b5db3203f7be00ac790b .png) } </style> <script> //快捷施法专区，懒人福音⬇️⬇️⬇️ // 结束时间 var...
建站笔记
09312
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 幻灯片底部虚化-汇聚访

实用子比主题 – 幻灯片底部虚化

今天给大家分享一款样式，这款样式是可以让幻灯片底部虚化的，结合起来非常好看！ 演示效果： 代码部署： [hidecontent type="payshow"] 将代码放到后台自定义CSS！ .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%); }...
建站笔记
08412
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 顶部多功能组件导航美化-汇聚访

实用子比主题 – 顶部多功能组件导航美化

这是子比主题的一款快速导航链接美化效果，这个效果最初是在极主题上看到的，于是就照着样式仿了一下，这个效果还是比较适合一些ACG站点的，话不多说喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：子比主题–>>页面&显示–>>顶部多功能组件–>>组件【下方】添加额外内容，将下面的代码丢里面即可，如果还不知道在哪，如下图！！ <div class="soft-cat-logo"> <a href="/yxsx"><span> <picture class="picture"> <source type="image/webp" srcset="https://img.dmguo.cn/2025/02/20250212023355196.png"><img class="jitheme-radius" src="https://img.dmguo.cn/2025/02/20250212023355196.png"> </picture> </span><em>游戏资源</em> </a><a href="/7b2"><span> <picture class="picture"> <source type="image/webp" srcset="https://img.dmguo.cn/2025/02/20250212023345786.png"><img class="jitheme-radius" src="https://img.dmguo.cn/2025/02/20250212023345786.png"> </picture> </span><em>主题美化</em> </a><a href="/forums"><span> <picture class="picture"> <source...
建站笔记
0947
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 分类栏目美化（两款）-汇聚访

实用子比主题 – 分类栏目美化（两款）

网站分类栏目美化的意义主要体现在提升用户体验和视觉吸引力，以及优化搜索引擎排名等方面。本文章将给大家分享两种分类栏目美化的教程哦~ 演示效果①： 演示效果②： 代码部署： [hidecontent type="reply"] 将下方代码加入到后台CSS里即可！图片放在帖子附件里了，可自行下载！ 效果①效果② .index-tab ul>li.active { color: #ffffff00 !important; background-color: #ffffff00 !important; border-radius: 6px; z-index: 1; position: relative; height: 39px; line-height: 44px; background: url(https://img.dmguo.cn/2025/01/20250120091106173.png); background-repeat: no-repeat; -webkit-background-size: 91px 39px; -moz-background-size:...
建站笔记
210414
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - ajax加载更多按钮美化-汇聚访

实用子比主题 – ajax加载更多按钮美化

给子比主题加一个ajax加载更多按钮的美化，这个美化确实很不错，（提供两种样式) 演示效果①： 演示效果②： 代码部署： [hidecontent type="reply"] 将下面代码放到子比自定义CSS即可 样式一： /*加载更多*/ .chat-next a, .theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a { display: inline-block; width: 130px; -webkit-border-radius: 0 0 16px 16px; -moz-border-radius: 0 0 16px 16px; border-radius: 0 0...
建站笔记
88110
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 仿哔哩哔哩网站页面回顶部的火箭-汇聚访

实用子比主题 – 仿哔哩哔哩网站页面回顶部的火箭

网站添加一个仿哔哩哔哩网站页面回顶部的火箭，小白式部署方式，喜欢的可以设置一波。 演示效果： 代码部署： [hidecontent type="payshow"] 如果是子比主题的话直接填在主题设置里的头部自定义html里即可，其他主题请自行测试！！ HTMLCSSJS <div class="to-top"></div> /*小火箭*/ .to-top { position: fixed; display: none; bottom: 100px; right: 20px; width: 62px; height: 85px; cursor: pointer; background-image: url(https://pic1.imgdb.cn/item/6900b5833203f7be00ac78dc .webp); background-position: -40px -44px; transition: transform 0.3s ease-in;...
建站笔记
07812
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 系统弹窗跳转引导提醒（第一版）-汇聚访

实用子比主题 – 系统弹窗跳转引导提醒（第一版）

尘封已久的代码，今天趁有空就跟大家分享一下！做有关Mac资源的站应该比较有用，该代码可以判断主机系统来显示对应的引导链接，样式简约美观，倒计时自动关闭！ 演示效果： 代码部署： [hidecontent type="reply"] JS代码放入后台！ try { if($ || jQuery) { tipsFun(); } } catch(e) { let script=document.createElement("script"); script.type="text/javascript"; script.src="/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(script); script.onload = tipsFun; } function tipsFun() { // 判断用户是否是windows if((navigator.platform == "Win32") ||...
建站笔记
1597
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 文章封面角标美化-汇聚访

实用子比主题 – 文章封面角标美化

今天分享的教程是WordPress子比主题美化教程：文章角标及封面图底部美化。简单的来说，就是在文章发布页面增加一个附加选项，可以通过这个附加选项达到我们想要的美化效果！文章发布时可在编辑页底部自行配置输入内容以及颜色，不填写内容则不显示。 演示效果： 代码部署： [hidecontent type="reply"] 一共三个代码，两个PHP代码和一个CSS代码，跟着教程操作就不会有问题！！ func代码zib-posts-list代码CSS代码 定位：/wp-content/themes/zibll/func.php文件，把下方代码添加进去即可： if (class_exists('CSF')) { CSF::createMetabox('huijuf', array( 'title' => '文章封面自定义标识', 'post_type' => array('post', 'page', 'plate', 'forum_post'), 'context' => 'advanced', 'data_type' => 'unserialize', )); CSF::createSection('huijuf', array( 'fields' => array( array(...
建站笔记
815011
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 自带滑块验证图片修改-汇聚访

实用子比主题 – 自带滑块验证图片修改

对于子比的滑动模块我们很多人都不是很喜欢自带的滑动模块的图片，接下来我来教大家怎么自...
建站笔记
48111
汇聚访的头像-汇聚访核心会员汇聚访1年前
1…2829303132…36跳转