子比主题自定义loading开屏动画

粉色果冻泡泡loading动画
图片[1]-子比主题自定义loading开屏动画-晚笙博客
下载图标
2023111006270165.png
png文件
96.5K

使用教程

打开/wp-content/themes/zibll/inc/functions/zib-head.php 搜索zib_is_crawler

(_pz('qj_dh_xs') == 'no2')前粘贴以下代码,如图:

图片[3]-子比主题自定义loading开屏动画-晚笙博客
(_pz('qj_dh_xs') == 'no0') {
        $dh_nr = '<div class="vxras"><div class="vxras2"></div><div class="vxras3"></div></div>';
    } elseif 

在搜索(_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>';
    }
    }

最后前往/wp-content/themes/zibll/inc/options/admin_options.php 搜索'no1' => __('淡出淡入', 'zib_language'), 在前面加入一行:'no0' => __('果冻泡泡', 'zib_language'), 保存即可

将下发css代码放置于后台——自定义代码——自定义css

部署代码

后台 >> Zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义CSS样式

body:after {
    content: " ";
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 999;
    background-image: url(图片链接);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%;
    animation: fadeOut 3s;
    animation-fill-mode: forwards;
    -webkit-transition: fadeOut 3s;
    transition: fadeOut 3s;
    pointer-events: none;
}
@keyframes fadeOut {
  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
  }
}
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
© 版权声明
WSZYZ.CN
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容