公告图标
公告：欢迎来到识趣资源，专注分享网站源码,美化教程,实用软件！
赞助榜单感谢每一位支持者
UE资源
2026-04-06
密码验证
子比主题 – 文章卡片弹窗美化样式(阿呆赞助)-识趣者资源
子比美化

美化子比主题 – 文章卡片弹窗美化样式(阿呆赞助)

本文介绍了如何美化文章卡片弹窗样式，灵感来源于图酷设计，由阿呆日记原创。通过CSS和JavaScript代码，实现了弹窗背景、容器、关闭按钮、内容、图片、信息、标题和按钮的样式设计。同时，还提供了响应式调整，确保在不同设备上都能良好显示。教程详细介绍了如何将代码应用到后台自定义CSS和JS中，实现个性化的文章卡片弹窗效果。 预览图 [hidecontent type="password" password="ly19960318" img_id="" img_url="" desc=""] 放到后台自定义css .custom-popup-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.45);z-index:9999;justify-content:center;align-items:center}.custom-popup-container{background-color:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:600px;width:90%;position:relative;overflow:hidden;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-popup-close{position:absolute;top:15px;right:15px;background:rgba(0,0,0,.3);border-radius:50%;width:36px;height:36px;display:flex;justify-content:center;align-items:center;border:none;font-size:20px;cursor:pointer;color:#fff;z-index:10;transition:all .5s ease}.custom-popup-close:hover{background:rgba(0,0,0,.6);transform:rotate(360deg)}.custom-popup-container{background-color:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:600px;width:90%;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);overflow:hidden;display:flex;flex-direction:column}.custom-popup-content{display:flex;flex-direction:column;width:100%}.custom-popup-image-container{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;margin:0!important;padding:0!important}#custom-popup-image{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;object-fit:cover!important;margin:0!important;padding:0!important;display:block!important}.dai-soft-popup-waves{position:absolute!important;bottom:-1px!important;left:0!important;width:100%!important;height:15vh!important;min-height:50px!important;max-height:80px!important;z-index:2!important;pointer-events:none!important;margin:0!important;padding:0!important}.custom-popup-info{height:135.75px!important;flex-shrink:0;box-sizing:border-box;padding:15px 30px 20px 30px;display:flex;flex-direction:column;justify-content:center;z-index:3;position:relative;background-color:#fff;margin-top:-1px}#custom-popup-title{font-size:22px;margin-top:0;margin-bottom:18px;color:#333;font-weight:700;line-height:1.4;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.custom-popup-buttons{display:flex;justify-content:center;gap:12px}.custom-popup-button{min-width:138px;border-radius:8px;padding:10px 18px;font-size:15px;font-weight:600;text-align:center;text-decoration:none;transition:all .3s ease;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.left-button{background:linear-gradient(135deg,#fd7a64 10%,#fb2d2d 100%);color:#fff!important;border:none;box-shadow:0 4px 12px rgba(251,45,45,.25)}.right-button{border:1px solid var(--main-border-color,#d8dde5);color:var(--focus-color,#4b5563)!important;box-shadow:none;transition:background-color .2s ease,border-color .2s ease,color...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 前天
#子比美化
 2026-03-29
5
子比插件-文章AI摘要解析-识趣者资源
子比插件

插件子比插件-文章AI摘要解析

这个插件其实在今年一月份就已经完成了，一直没有发布出来，今天就索性发布出来，插件调用...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 10天前
#子比美化
 2026-03-29
5
子比插件-发红包积分插件-识趣者资源
子比插件

插件子比插件-发红包积分插件

这个插件是今年大年初一开发的,测试效果还算可以但是有一点点小毛病,就是侧边栏使用短代...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 10天前
#子比美化
 2026-03-29
5
子比插件-AI生成文章封面-识趣者资源
子比插件

插件子比插件-AI生成文章封面

功能有识趣资源自主研发,插件名为文章智绘,可以为文章生成相关封面,起初有开发文章发布...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 10天前
#子比美化
 2026-03-29
999
子比插件-COS图片采集-识趣者资源
子比插件

插件子比插件-COS图片采集

此功能由识趣资源全自主研发,思路明确逻辑清晰,采集方便,内置采集链接,预计后期增加定...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 10天前
#子比美化
 2026-03-29
5
子比插件-每日红包插件-识趣者资源
子比插件

插件子比插件-每日红包插件

该功能由识趣资源自主研发采用CFS框架,目前测试功能一切正常.插件未加密可自由开发 ...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 10天前
#子比美化
 2026-03-20
评论可见
子比主题-给LOGO点颜色瞧瞧-识趣者资源
子比美化

美化子比主题-给LOGO点颜色瞧瞧

转载自阿呆日记-给你的logo来点颜色瞧瞧,个人感觉还不错。 请看展示图 [hidecontent type="reply"] 放置子比主题后台自定义CSS代码 .navbar-logo { background-image: linear-gradient(to right, red, blue); /* 修改渐变起始颜色和结束颜色 */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: hue 4s infinite; } @keyframes hue { from { filter: hue-rotate(0deg); } to { filter:...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 19天前
#子比美化
 2026-03-20
188积分
子比主题-动态星空萤火背景-识趣者资源
子比美化

美化子比主题-动态星空萤火背景

此篇文章搬运自阿呆日记,已适配日夜模式,喜欢的请自行部署 预览图 [hidecontent type="payshow"] 后台自定义CSS添加以下代码 /* 暗色主题星空背景样式 */ .dark-theme { box-sizing: border-box; padding: 0; margin: 0; } .dark-theme body { background: #22313f; position: relative; } .dark-theme #starsContainer { position: absolute; top: 0; left: 0; right:...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 19天前
#子比美化
2026-04-06
密码验证
子比主题 – 文章卡片弹窗美化样式(阿呆赞助)-识趣者资源
子比美化

美化子比主题 – 文章卡片弹窗美化样式(阿呆赞助)

本文介绍了如何美化文章卡片弹窗样式，灵感来源于图酷设计，由阿呆日记原创。通过CSS和JavaScript代码，实现了弹窗背景、容器、关闭按钮、内容、图片、信息、标题和按钮的样式设计。同时，还提供了响应式调整，确保在不同设备上都能良好显示。教程详细介绍了如何将代码应用到后台自定义CSS和JS中，实现个性化的文章卡片弹窗效果。 预览图 [hidecontent type="password" password="ly19960318" img_id="" img_url="" desc=""] 放到后台自定义css .custom-popup-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.45);z-index:9999;justify-content:center;align-items:center}.custom-popup-container{background-color:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:600px;width:90%;position:relative;overflow:hidden;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-popup-close{position:absolute;top:15px;right:15px;background:rgba(0,0,0,.3);border-radius:50%;width:36px;height:36px;display:flex;justify-content:center;align-items:center;border:none;font-size:20px;cursor:pointer;color:#fff;z-index:10;transition:all .5s ease}.custom-popup-close:hover{background:rgba(0,0,0,.6);transform:rotate(360deg)}.custom-popup-container{background-color:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:600px;width:90%;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);overflow:hidden;display:flex;flex-direction:column}.custom-popup-content{display:flex;flex-direction:column;width:100%}.custom-popup-image-container{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;margin:0!important;padding:0!important}#custom-popup-image{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;object-fit:cover!important;margin:0!important;padding:0!important;display:block!important}.dai-soft-popup-waves{position:absolute!important;bottom:-1px!important;left:0!important;width:100%!important;height:15vh!important;min-height:50px!important;max-height:80px!important;z-index:2!important;pointer-events:none!important;margin:0!important;padding:0!important}.custom-popup-info{height:135.75px!important;flex-shrink:0;box-sizing:border-box;padding:15px 30px 20px 30px;display:flex;flex-direction:column;justify-content:center;z-index:3;position:relative;background-color:#fff;margin-top:-1px}#custom-popup-title{font-size:22px;margin-top:0;margin-bottom:18px;color:#333;font-weight:700;line-height:1.4;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.custom-popup-buttons{display:flex;justify-content:center;gap:12px}.custom-popup-button{min-width:138px;border-radius:8px;padding:10px 18px;font-size:15px;font-weight:600;text-align:center;text-decoration:none;transition:all .3s ease;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.left-button{background:linear-gradient(135deg,#fd7a64 10%,#fb2d2d 100%);color:#fff!important;border:none;box-shadow:0 4px 12px rgba(251,45,45,.25)}.right-button{border:1px solid var(--main-border-color,#d8dde5);color:var(--focus-color,#4b5563)!important;box-shadow:none;transition:background-color .2s ease,border-color .2s ease,color...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 前天
#子比美化
 2026-03-29
5
子比插件-文章AI摘要解析-识趣者资源
子比插件

插件子比插件-文章AI摘要解析

这个插件其实在今年一月份就已经完成了，一直没有发布出来，今天就索性发布出来，插件调用...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 10天前
#子比美化
 2026-03-29
5
子比插件-发红包积分插件-识趣者资源
子比插件

插件子比插件-发红包积分插件

这个插件是今年大年初一开发的,测试效果还算可以但是有一点点小毛病,就是侧边栏使用短代...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 10天前
#子比美化
 2026-03-29
5
子比插件-AI生成文章封面-识趣者资源
子比插件

插件子比插件-AI生成文章封面

功能有识趣资源自主研发,插件名为文章智绘,可以为文章生成相关封面,起初有开发文章发布...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 10天前
#子比美化
 2026-03-29
999
子比插件-COS图片采集-识趣者资源
子比插件

插件子比插件-COS图片采集

此功能由识趣资源全自主研发,思路明确逻辑清晰,采集方便,内置采集链接,预计后期增加定...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 10天前
#子比美化
 2026-03-29
埃姆登的旗袍太优雅了 - 正片-识趣者资源

埃姆登的旗袍太优雅了 – 正片

识趣资源的头像-识趣者资源
至尊会员识趣资源· 10天前
#漫展写真
 2026-03-29
5
子比插件-每日红包插件-识趣者资源
子比插件

插件子比插件-每日红包插件

该功能由识趣资源自主研发采用CFS框架,目前测试功能一切正常.插件未加密可自由开发 ...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 10天前
#子比美化
 2026-03-20
评论可见
子比主题-给LOGO点颜色瞧瞧-识趣者资源
子比美化

美化子比主题-给LOGO点颜色瞧瞧

转载自阿呆日记-给你的logo来点颜色瞧瞧,个人感觉还不错。 请看展示图 [hidecontent type="reply"] 放置子比主题后台自定义CSS代码 .navbar-logo { background-image: linear-gradient(to right, red, blue); /* 修改渐变起始颜色和结束颜色 */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: hue 4s infinite; } @keyframes hue { from { filter: hue-rotate(0deg); } to { filter:...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 19天前
#子比美化
 2026-03-20
188积分
子比主题-动态星空萤火背景-识趣者资源
子比美化

美化子比主题-动态星空萤火背景

此篇文章搬运自阿呆日记,已适配日夜模式,喜欢的请自行部署 预览图 [hidecontent type="payshow"] 后台自定义CSS添加以下代码 /* 暗色主题星空背景样式 */ .dark-theme { box-sizing: border-box; padding: 0; margin: 0; } .dark-theme body { background: #22313f; position: relative; } .dark-theme #starsContainer { position: absolute; top: 0; left: 0; right:...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 19天前
#子比美化
 2026-03-18
评论可见
子比主题 – 首页轮播图小工具-识趣者资源
子比工具

美化子比主题 – 首页轮播图小工具

这是一款来自论坛一位作者写的首页轮播小工具，我感觉这个小工具还是比较不错的，左边轮播图可以滚动，右边两个是固定的链接和图片，封装了到小工具里面了，这样到时候更新之后解压还是正常可以用，喜欢的自行部署吧！ 演示图 [hidecontent type="reply"] 跟着我的教程走，别走偏了，先看我怎么说的，再去操作，这个小工具跟我以前发的教程一模一样首先我们第一步：/wp-content/themes/zibll/func.php文件，如果没有这个文件自己创建在子比目录创建一个，创建之后记得加php头，要不然会报错！加如下面的代码，我会详细说这个 $widgets_files = array( 'tengfei_decoration_tool.php', /*小工具文件名*/ ); foreach ($widgets_files as $file) { require get_template_directory() . '/tengfei/widgets/' . $file; } 将上面的代码放到/wp-content/themes/zibll/func.php文件，都是一样的，看上面的代码，别看懵逼了，我们要明白这个：tengfei_decoration_tool.php这个代码，这个代码就是代表一个小工具的名字，相当于就是用上面的代码调用的，就是如果想加第二个小工具，那就是在tengfei_decoration_tool.php这个代码下面加一行其他小工具的别名，我说的已经很仔细了，不懂问站长，文件放底部 附件上传到：/wp-content/themes/zibll解压即可！ 子比主题 – 精选滑动卡片小工具下载 提取码ZNfA [/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 21天前
#子比美化
 2026-03-18
评论可见
子比主题 – 右侧简单子比客服弹窗样式-识趣者资源
子比美化

美化子比主题 – 右侧简单子比客服弹窗样式

这是一款子比主题右侧简单客服弹窗样式，还是比较不错的，一共分两个，一个是停止滑动鼠标出现该按钮，另一个是一直显示该按钮，喜欢的自行部署吧！ 演示图 [hidecontent type="reply"] 自定义头部Html代码自定义CSS代码自定义JS代码 定位：子比主题–>>自定义头部HTML，将下面的放入进去即可！ <div class="zib-kefu-container"> <div class="zib-kefu-btn" id="zibKefuBtn"> <i class="fa fa-comments-o"></i> <span>联系我们</span> </div> <div class="zib-backtop-btn" id="zibBacktopBtn"> <i class="fa fa-arrow-up"></i> </div> <!-- 客服面板 --> <div class="zib-kefu-panel" id="zibKefuPanel"> <div class="zib-kefu-close" id="zibKefuClose"> <i class="fa fa-times"></i>...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 21天前
#子比美化
 2026-03-16
免费
源支付V7 – V1.9.8免授权版安装包-识趣者资源
支付源码

源码源支付V7 – V1.9.8免授权版安装包

YPay是源分享推出的一款为个人站长打造的专业聚合免签系统,以卓越的系统性能,个性的...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 24天前
#建站源码
123…83跳转
聚合资源
随便看看
分类-子比美化-识趣者资源 1.5W+
子比美化
子比主题美化相关教程
349篇文章更多文章
美化子比主题 – 文章卡片弹窗美化样式(阿呆赞助)
前天
插件子比插件-文章AI摘要解析
10天前
插件子比插件-发红包积分插件
10天前
插件子比插件-AI生成文章封面
10天前
插件子比插件-COS图片采集
10天前
分类-大型单机-识趣者资源 9765
大型单机
会员专享大型单机游戏
173篇文章更多文章
使命召唤21：黑色行动6
33天前
使命召唤20：现代战争3
33天前
匹诺曹的谎言
33天前
战术小队/Squad/支持网络联机
33天前
飙酷车神2/The Crew 2
33天前
分类-建站源码-识趣者资源 426
建站源码
网络站点源码分享基地
11篇文章更多文章
源码源支付V7 – V1.9.8免授权版安装包
24天前
小猫小狗的窝v1.0.0博客
33天前
在线缩略图生成工具源码
1个月前
全能WEB工具箱源码 编程助手带暗黑模式
1个月前
双端自适应电脑壁纸系统v2.0 支持自采集与自动更新
1个月前
分类-实用软件-识趣者资源 764
实用软件
分享全网优质软件资源
10篇文章更多文章
SmartHostsTool – 智能 Hosts 测速优化工具
1个月前
LetRecovery 中文绿色版「Windows系统重装工具」
1个月前
LiteMonitor v1.3.3 桌面硬件监控工具
1个月前
Gopeed 功能强大的下载器 v1.9.1 中文绿色版
1个月前
BiliTickerBuy B 站会员购辅助工具
1个月前
软件分享
更多

漫展写真

更多
行梦侧畔 鸿雪cos – 正片
51
13

行梦侧畔 鸿雪cos – 正片

柴郡cos – 正片
30
9

柴郡cos – 正片

柴郡废稿旗袍 – 漫展场照
45
9

柴郡废稿旗袍 – 漫展场照

桃乐丝『宴桃源』 – 正片
34
9

桃乐丝『宴桃源』 – 正片

和平精英也有自己的不知火舞了 – 正片
40
6

和平精英也有自己的不知火舞了 – 正片

指挥官下次见~ – 正片
50
10

指挥官下次见~ – 正片

cicf漫展散场后夜景
47
1

cicf漫展散场后夜景

哈梅尔 幻境尘影cos – 正片
28
8

哈梅尔 幻境尘影cos – 正片

属于甜妹的夏日jk穿搭～
46
1

属于甜妹的夏日jk穿搭～

亲爱的~！ – 正片
34
9

亲爱的~！ – 正片