177资源论坛 2023-03-13为你的网站加上Loading等待加载效果吧 | Loading页面加载添加教程

2023-03-13 0 162 百度已收录

为你的网站加上Loading等待加载效果吧 | Loading页面加载添加教程

效果图 :

111.png

教程开始

新建一个loading样式css
将以下代码放进去 然后引用这个文件

#Loadanimation{
   background-color:#fff;
   height:100%;
   width:100%;
   position:fixed;
   z-index:1;
   margin-top:0px;top:0px;
   
}
#Loadanimation-center{
   width:100%;
   height:100%;
   position:relative;
   
}
#Loadanimation-center-absolute{
   position:absolute;
   left:50%;
   top:50%;
   height:200px;
   width:200px;
   margin-top:-100px;
   margin-left:-100px;
   
}
.xccx_object{
   -moz-border-radius:50% 50% 50% 50%;
   -webkit-border-radius:50% 50% 50% 50%;
   border-radius:50% 50% 50% 50%;
   position:absolute;
   border-left:5px solid #87CEFA;
   border-right:5px solid #FFC0CB;
   border-top:5px solid transparent;
   border-bottom:5px solid transparent;
   -webkit-animation:animate 2.5s infinite;
   animation:animate 2.5s infinite;
   
}
#xccx_one{
   left:75px;
   top:75px;
   width:50px;
   height:50px;
   
}
#xccx_two{
   left:65px;
   top:65px;
   width:70px;
   height:70px;
   -webkit-animation-delay:0.1s;
   animation-delay:0.1s;
   
}
#xccx_three{
   left:55px;
   top:55px;
   width:90px;
   height:90px;
   -webkit-animation-delay:0.2s;animation-delay:0.2s;
   
}
#xccx_four{
   left:45px;
   top:45px;
   width:110px;
   height:110px;
   -webkit-animation-delay:0.3s;
   animation-delay:0.3s;
   
}
@-webkit-keyframes animate{50%{
   -ms-transform:rotate(180deg);
   -webkit-transform:rotate(180deg);
   transform:rotate(180deg);
   
}
100%{-ms-transform:rotate(0deg);
   -webkit-transform:rotate(0deg);
   transform:rotate(0deg);
   
}
   
}
@keyframes animate{50%{
   -ms-transform:rotate(180deg);
   -webkit-transform:rotate(180deg);
   transform:rotate(180deg);
   
}
100%{
   -ms-transform:rotate(0deg);
   -webkit-transform:rotate(0deg);
   transform:rotate(0deg);
   
}
}

第二步:

将以下代码填写入头部文件 一般都为 header.php



   

       

       

       

       

   




注意 注意 fadeOut 里面填写的是毫秒数

本loading可以自定义 网上也有很多css的 只要替换第二步的代码都可以成功(JS代码别替换)

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

© ym.177yxw.com

177资源论坛 技术文章 177资源论坛 2023-03-13为你的网站加上Loading等待加载效果吧 | Loading页面加载添加教程 https://ym.177yxw.com/1592/

常见问题

相关文章

评论
暂无评论
官方客服团队

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