#热门
给网站添加Loading加载中动画代码

2023-02-15 0 2,045

PS

Loading动画作用:

网站添加Loading动画可有效防止部分浏览器打开网页后因为有些静态资源还没有加载完毕导致的闪屏、白屏、花屏、错误排版等BUG。

界面截图

给网站添加Loading加载中动画代码

HTML代码:

<div class="loading"></div>

CSS代码:

.loading{
    width: 300px;
    height: 300px;
    border:1px solid black;
    position: relative;
}
.loading::before,.loading::after{
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    background: black;
    border-radius: 50%;
    top:0;      
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;   /*上下左右都为0,再加上margin:auto; 就是自动居中*/
    animation: s 1.5s linear infinite;  /*加上s状态,状态开始到结束为1.5s*/
}
.loading::after{
    animation-delay: 0.75s;     /*第二个圆出现的时间*/
}
@keyframes s{
    0%{             /*初始状态*/
        width: 0px;
        height: 0px;
        opacity: 1; /*透明度*/
    }
    100%{           /*结束状态*/
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}

声明:本站所有资源仅供学习和研究传播,大家请在下载后24小时内删除,一切关于该资源商业行为与念破网(https://www.nianpo.com)无关。 请勿将该资源进行商业交易、转载等行为,该资源只为研究、学习所提供,该软件使用后发生的一切问题与本站无关。 (若您进入本站就表示同意以上条款)若本资源侵犯了您的权益,请联系我们予以删除!(E-mail:765934@qq.com) 会员QQ群:5676140

念破网 WordPress教程 给网站添加Loading加载中动画代码 https://www.nianpo.com/5726.html

下一篇:

已经没有下一篇了!

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务