为你的网站添加加载动画


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

效果图

IMG_2015

首先需要准备一个循环的动画图片(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秒隐藏,具体效果类似淡入淡出

 

温馨提示:本文最后更新于2024-04-11 08:53:54,某些文章具有时效性,若有错误或已失效,请在下方留言或联系小春
------本页内容已结束,喜欢请分享------

网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
分享是一种美德,当你分享时请你附带上本文链接。

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

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

    暂无评论内容