CSS3实现的页面加载中动画过度特效源码是一款实现了点击加载页面后出现动画过度效果的代码，本段代码适应于所有网页使用，本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码。
项目开始前要准备一张loading动画的gif图片
基本逻辑：
模态框遮罩 + loading.gif动图，默认隐藏模态框，页面开始发送Ajax请求数据时，显示模态框，请求完成，隐藏模态框。
1.新建一个Django项目，创建应用app01, 配置好路由和static，略。将gif动图放到静态文件夹下，结构如下：
2.视图中定义一个函数，它返回页面test.html：
3.test.html页面如下：
4.CSS样式如下：
说明：
通过设置position: fixed，并令上下左右为0，实现模态框覆盖整个页面；
设置gif动态图为背景，居中，来显示加载效果；
通过设置z-index值，令gif图悬浮在模态框上面；
background-color: black;是为了看着明显，具体使用时可以设为white;
5.JS文件如下：
说明：
页面载入后，开始发送Ajax请求，从服务端ajax_handler视图请求数据，这时显示模态框
请求完成后，不论成功与否，隐藏模态框
6.ajax_handler视图如下，它模拟网络延迟，并返回一些字符串：
效果如下：
如果有想学习web前端的同学，可来我们的web前端技术学习QQ群：608334068，免费送整套系统的web前端视频教程！我每晚上8点还会在群内直播讲解前端知识，这是一个仅供粉丝朋友们学习交流的群，欢迎大家前来学习哦~不是学习web前端的小伙伴非诚勿扰哦下面是部分资料截图：
欢迎关注胖胖爱前端的简书号，可视化学习web前端，每天更新文章，让web前端学习更加简单。
声明：本文内容来源于网络，如有侵权请联系删除