纯css3 加载loading动画特效

最近项目中要实现当页面还没有加载完给用户提示正在加载的loading，本来是想做个图片提示的，但是图片如果放大电脑的分辨率就会感觉到很虚，体验效果很不好。于是就采用css3+js实现这个loading的动画效果，最终在我们前端工程师的帮助之下完成。所以记录在这里，如果感兴趣的朋友也可以看看，大家互相焦炉学习。

1、demo.html

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="./loaders.css">

<title>纯css3 加载loading动画特效</title>

</head>

<body>

<style>

body{width:100%;height:100%;margin:0;}

.fuceng{position:absolute;width:100%;height:100%;margin:0;}

.loading{margin-left: 50%; margin-top:20%;}

</style>

 <div>

	<div class="fuceng">

      <div class="loading">

        <div class="loader-inner line-spin-fade-loader">

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

 	</div>

</body>

</html>

2、loaders.css

/**

 *

 * All animations must live in their own file

 * in the animations directory and be included

 * here.

 *

 */

/**

 * Styles shared by multiple animations

 */

/**

 */

.ball-spin-fade-loader {

  position: relative; }

  .ball-spin-fade-loader > div:nth-child(1) {

    top: 25px;

    left: 0;

    -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;

            animation: ball-spin-fade-loader 1s 0s infinite linear; }

  .ball-spin-fade-loader > div:nth-child(2) {

    top: 17.04545px;

    left: 17.04545px;

    -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;

            animation: ball-spin-fade-loader 1s 0.12s infinite linear; }

  .ball-spin-fade-loader > div:nth-child(3) {

    top: 0;

    left: 25px;

    -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;

            animation: ball-spin-fade-loader 1s 0.24s infinite linear; }

  .ball-spin-fade-loader > div:nth-child(4) {

    top: -17.04545px;

    left: 17.04545px;

    -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;

            animation: ball-spin-fade-loader 1s 0.36s infinite linear; }

  .ball-spin-fade-loader > div:nth-child(5) {

    top: -25px;

    left: 0;

    -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;

            animation: ball-spin-fade-loader 1s 0.48s infinite linear; }

  .ball-spin-fade-loader > div:nth-child(6) {

    top: -17.04545px;

    left: -17.04545px;

    -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;

            animation: ball-spin-fade-loader 1s 0.6s infinite linear; }

  .ball-spin-fade-loader > div:nth-child(7) {

    top: 0;

    left: -25px;

    -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;

            animation: ball-spin-fade-loader 1s 0.72s infinite linear; }

  .ball-spin-fade-loader > div:nth-child(8) {

    top: 17.04545px;

    left: -17.04545px;

    -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;

            animation: ball-spin-fade-loader 1s 0.84s infinite linear; }

  .ball-spin-fade-loader > div {

    background-color: #279fcf;

    width: 15px;

    height: 15px;

    border-radius: 100%;

    margin: 2px;

    -webkit-animation-fill-mode: both;

            animation-fill-mode: both;

    position: absolute; }

@-webkit-keyframes line-spin-fade-loader {

  50% {

    opacity: 0.3; }

  100% {

    opacity: 1; } }

@keyframes line-spin-fade-loader {

  50% {

    opacity: 0.3; }

  100% {

    opacity: 1; } }

.line-spin-fade-loader {

  position: relative; }

  .line-spin-fade-loader > div:nth-child(1) {

    top: 20px;

    left: 0;

    -webkit-animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;

            animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out; }

  .line-spin-fade-loader > div:nth-child(2) {

    top: 13.63636px;

    left: 13.63636px;

    -webkit-transform: rotate(-45deg);

        -ms-transform: rotate(-45deg);

            transform: rotate(-45deg);

    -webkit-animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;

            animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out; }

  .line-spin-fade-loader > div:nth-child(3) {

    top: 0;

    left: 20px;

    -webkit-transform: rotate(90deg);

        -ms-transform: rotate(90deg);

            transform: rotate(90deg);

    -webkit-animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;

            animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out; }

  .line-spin-fade-loader > div:nth-child(4) {

    top: -13.63636px;

    left: 13.63636px;

    -webkit-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

            transform: rotate(45deg);

    -webkit-animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;

            animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out; }

  .line-spin-fade-loader > div:nth-child(5) {

    top: -20px;

    left: 0;

    -webkit-animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;

            animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out; }

  .line-spin-fade-loader > div:nth-child(6) {

    top: -13.63636px;

    left: -13.63636px;

    -webkit-transform: rotate(-45deg);

        -ms-transform: rotate(-45deg);

            transform: rotate(-45deg);

    -webkit-animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;

            animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out; }

  .line-spin-fade-loader > div:nth-child(7) {

    top: 0;

    left: -20px;

    -webkit-transform: rotate(90deg);

        -ms-transform: rotate(90deg);

            transform: rotate(90deg);

    -webkit-animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;

            animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out; }

  .line-spin-fade-loader > div:nth-child(8) {

    top: 13.63636px;

    left: -13.63636px;

    -webkit-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

            transform: rotate(45deg);

    -webkit-animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;

            animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out; }

  .line-spin-fade-loader > div {

    background-color: #279fcf;

    width: 4px;

    height: 35px;

    border-radius: 2px;

    margin: 2px;

    -webkit-animation-fill-mode: both;

            animation-fill-mode: both;

    position: absolute;

    width: 5px;

    height: 15px; }

3、效果图

纯css3 加载loading动画特效的更多相关文章

页面预加载loading动画，再载入内容
默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...
纯css3加载动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...
2014圣诞节一款纯css3实现的雪人动画特效
在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览源码下载实现的代码. html代码: <span cla ...
[Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
页面加载loading动画
关于页面加载的loading动画,能度娘到的大部分都是通过定时器+蒙层实现的,虽然表面上实现了动画效果,实际上动化进程和页面加载进程是没有什么关系的,只是设置几秒钟之后关闭蒙层,但假如页面须要加载的元 ...
css3加载ing动画
项目中ajax交互成功前总会需要给用户提醒,比如请稍候.正在加载中等等,那个等待的动图以前项目中用的是gif,在移动端画质很渣,有毛边,于是在新项目中用css3展示加载中的动画效果. function ...
CSS3扁平化Loading动画特效
效果预览:http://hovertree.com/texiao/css3/42/ 代码如下: <!doctype html> <html> <head> < ...
兼容ie10及以上css3加载进度动画
html <div class="spinner"> <div class="rect1"></div> < ...
各种加载效果，适合做加载loading动画效果 Eclipse版
Animation.rar 链接: http://pan.baidu.com/s/1c0QkOz2 密码: kd57

随机推荐

BZOJ-4424 &&CodeForces-19E Fairy DP+dfs （Link-Cut-Tree可A）
Va爷的胡策题T2 E. Fairy time limit per test1.5 seconds memory limit per test256 megabytes inputstandard i ...
BZOJ-1834 网络扩容最小费用最大流+最大流+乱搞
1834: [ZJOI2010]network 网络扩容 Time Limit: 3 Sec Memory Limit: 64 MB Submit: 2269 Solved: 1136 [Submit ...
[NOIP2009] 提高组洛谷P1073 最优贸易
题目描述 C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一部分为双向通行的道路 ...
POJ 1625 Censored!
辣鸡OI毁我青春 Description The alphabet of Freeland consists of exactly N letters. Each sentence of Freela ...
洛谷P1156 垃圾陷阱
动规仍然是难关啊题目描述卡门――农夫约翰极其珍视的一条Holsteins奶牛――已经落了到“垃圾井”中.“垃圾井”是农夫们扔垃圾的地方,它的深度为D(2<=D<=100)英尺. 卡门想 ...
网络包处理工具NetBee
What is NetBee? NetBee is a new library intended for several types of packet processing, such as pac ...
unix/linux进程详解
技术分享启动新进程 stdlib.hintsystem(const char *string)whichequals to "sh -c string" 替换进程映像unistd ...
C#面向对象中类的静态成员与非静态成员的区别
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
在多浏览器使用JS复制内容到剪切板，无需插件
最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷 ...
UVa OJ 197 - Cube (立方体)
Time limit: 30.000 seconds限时30.000秒 Problem问题 There was once a 3 by 3 by 3 cube built of 27 smaller ...

纯css3 加载loading动画特效

纯css3 加载loading动画特效的更多相关文章

随机推荐

热门专题