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 前端的小伙伴非诚勿扰哦下面是部分资料截图:
来源: http://www.jianshu.com/p/9ec8a4c6070e