小ㅤ七ㅤ之ㅤ家
启动

主题美化-粉色果冻泡泡loading动画

主题美化2周前更新 小七
379 0 0
主题美化-粉色果冻泡泡loading动画

🐝食用教程

目录

  1. 步骤1:修改主题核心文件(zib-head.php)
  2. 步骤2:添加自定义 CSS 样式
  3. 步骤3:新增后台选项(admin_options.php)

步骤1:修改主题核心文件(zib-head.php)

文件路径</strong:/wp-content/themes/zibll/inc/functions/zib-head.php

1.1 粘贴代码片段1

打开文件后,搜索关键词 zib_is_crawler,找到代码 (_pz('qj_dh_xs') == 'no2'),在其前面粘贴以下代码:

(_pz('qj_dh_xs') == 'no0') {
    $dh_nr = '<div class="vxras"><div class="vxras2"></div><div class="vxras3"></div></div>';
} elseif

1.2 覆盖代码片段2

继续搜索关键词 (_pz('qj_loading')),找到从 if 开始到 } 结束的代码块,用以下代码完整覆盖:

if (_pz('qj_loading')) {
    return '<div class="qjl qj_loading" style="position: fixed;background:linear-gradient(150deg,#d299c2,#fef9d7);overflow: hidden;align-items: center;justify-content: center;display: flex;width: 100%;margin-top:-150px;height:300%;z-index: 99999999"><div style="position:fixed;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center">' . $dh_nr . '</div></div>';
}

步骤2:添加自定义 CSS 样式

1. 登录 WordPress 后台,进入「外观 → 自定义 → 自定义 CSS」(或主题设置 → 自定义代码 → 自定义 CSS);
2. 粘贴以下代码并保存:

/* 果冻泡泡 */
.vxras{width:200px;height:200px;position:relative}
.vxras2{width:100%;height:100%;background:radial-gradient(circle at 75% 30%,#fff 5px,#ff21c0 8%,#5b5b5b 60%,#ff21c0 100%);border-radius:50%;box-shadow:inset 0 0 20px #fff,inset 10px 0 46px #eaf5fc,inset 80px 0 60px #efcde6,inset -20px -60px 100px #f9f6de,inset 0 50px 140px #f9f6de,0 0 90px #fff;animation:bubble 4s ease-in-out infinite}
.vxras3{background-color:rgba(0,0,0,0.15);width:150px;height:40px;border-radius:50%;position:absolute;left:50%;margin-left:-75px;bottom:-100px;filter:blur(1px);animation:shadow 4s ease-in-out infinite}
@keyframes bubble{0%,100%{transform:translateY(0)}50%{transform:translateY(-80px)}}
@keyframes shadow{0%,100%{transform:scale(0.5)}50%{transform:scale(1)}}

步骤3:新增后台选项(admin_options.php)

文件路径</strong:/wp-content/themes/zibll/inc/options/admin_options.php

1. 打开文件后,搜索关键词 'no1' => __('淡出淡入', 'zib_language'),
2. 在该代码前面新增以下代码,保存文件:

'no0' => __('果冻泡泡', 'zib_language'),


© 版权声明

相关文章

暂无评论

暂无评论...
小七之家 导航
友情链接 申请
在线聊天 6人
加载耗时
网站运行
服务剩余 0

网址设置

网址样式切换

详细

网址卡片按钮

显示

布局设置

左侧边栏菜单

展开

页面最大宽度

2000px

搜索框设置

搜索框背景上下位置

仅对图片背景生效

50%

自定义搜索框高度

  • 聚焦
  • 信息
  • 默认