为你的网站添加加载动画-知新网

------正文内容展示，开始汲取新知识啦------

效果图

首先需要准备一个循环的动画图片（GIF），没有的我提供一个早稻姬的

找到header.php文件，再body后面加入以下代码

<div class="loader" style="flex-direction: column;color: #f77b90;"><img src="https://cos.uocin.com/wp-content/uploads/2023/11/20231104073127417.gif" alt="loader"><br>Loading···</div>

然后添加css和js

css

.loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #FFF;
    z-index: 99;
    opacity: 1; /* 初始透明度为1（完全不透明） */
    transition: opacity 0.5s, z-index 0.5s; /* 添加过渡效果，时长为1秒 */
}
.loader.hidden {
    opacity: 0; /* 当添加.hidden类时，透明度变为0 */
    z-index: 0; /* 同时将z-index设置为0 */
}
.loader>img {
    height: 96px;/*根据自身需求修改图片大小*/
}

JS

此处内容已隐藏，请评论后刷新页面查看.

因为加载好就隐藏很突兀，所以搞了延迟0.5秒隐藏，具体效果类似淡入淡出

温馨提示：本文最后更新于2023-12-19 14:50:39，某些文章具有时效性，若有错误或已失效，请私信客服或联系知新社长。

------本文内容已结束，喜欢请分享------

感谢您的访问，Ctrl+D收藏本站吧。

相关声明 1、本站名称：知新网
2、本站永久网址：https://www.uzhix.com
3、本站部分内容源于网络和用户投稿，仅供学习与参考，如有侵权，请联系站长进行删除处理。
4、用户评论和发布内容，并不代表本站赞同其观点和对其真实性负责。
5、本站禁止以任何方式发布或转载任何违法的相关信息。
6、资源大多存储在云盘，如发现链接失效，请联系我们替换更新。

三月 29