先看图，多数是从别人那里看的效果直接仿的，先开随笔，有了创意继续加

其实3个之后，脑子里立刻有个第四个的制作思路，无外乎是利用border或者块元素变形，然后构思好接下来的行为，写起来也非常简单，5个一共用了半个小时左右，缺的还是思路啊

代码如下

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>仅在chrome下正常显示</title>

<style>

*{ margin:0; padding:0;}

.css_content{

    width:300px; height:300px; float:left; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; border:1px solid #ccc;

}

/* NO.1 */

.loading1{

    width:100px;

    height:100px;

    margin:50px;

    border:10px solid #ccc;

    border-left-color:#000;

    border-radius:50%;

    -webkit-animation: loading1 1s linear infinite;

}

@-webkit-keyframes loading1{

    to { -webkit-transform:rotate(1turn)};

}

/* NO.2 */

.loading2{ width:150px; height:50px; text-align:center;} 

.loading2 span{

     display:inline-block;

     width:6px;

     height:100%;

     background:green;

     -webkit-animation: loading2 1.2s infinite ease-in-out ;

}

/* 下面的样式，如果不加上.loading2 则不生效 */

.loading2 .line2{

    -webkit-animation-delay:-1.1s;

}

.loading2 .line3{

    -webkit-animation-delay:-1.0s;

}

.loading2 .line4{

    -webkit-animation-delay:-0.9s;

}

.loading2 .line5{

    -webkit-animation-delay:-0.8s;

}

@-webkit-keyframes loading2{

     0%,40%,100%{

    -webkit-transform:scaleY(.4);

  }

  20%{

    -webkit-transform:scaleY(1);

  }

}

/* loading3 */

.loading3{ width:50px; height:50px; border:2px solid #666; border-radius:50%; border-left-color:transparent; border-right-color:transparent;

    -webkit-animation:loading3 2s infinite;

}

@-webkit-keyframes loading3{

    0% {

        -webkit-transform:rotate(0deg);

    }

    50%{

        -webkit-transform:rotate(360deg);

    }

    100% {

        -webkit-transform:rotate(0deg);

    }

}

/* loading4 */

.loading4{ width:200px; height:40px; font-family:"微软雅黑"; text-align:center;}

.loading4 span{ display:inline-block;

    -webkit-animation:loading4 1.4s infinite ease-in-out;

}

.loading4 .str1{ -webkit-animation-delay:-1.3s;}

.loading4 .str2{ -webkit-animation-delay:-1.2s;}

.loading4 .str3{ -webkit-animation-delay:-1.1s;}

.loading4 .str4{ -webkit-animation-delay:-1.0s;}

.loading4 .str5{ -webkit-animation-delay:-.9s;}

.loading4 .str6{ -webkit-animation-delay:-.8s;}

.loading4 .str7{ -webkit-animation-delay:-.7s;}

@-webkit-keyframes loading4{

    0%,40%,100% {

        -webkit-transform:translateY(0px);

    }

    20% {

        -webkit-transform:translateY(-20px);

    }

}

/* N0.5 */

.loading5{ width:50px; height:50px; position:relative; -webkit-animation:loading5 1.5s linear infinite;}

.loading5 span{ position:absolute; left:50%; top:50%; width:3px; height:10px; display:block; -webkit-transform-origin:center -8px;}

.loading5 .b1{  -webkit-transform:translate(-50%,8px) rotate(-45deg); background-color:#000;}

.loading5 .b2{  -webkit-transform:translate(-50%,8px) rotate(-90deg); background-color:#222;}

.loading5 .b3{  -webkit-transform:translate(-50%,8px) rotate(-135deg); background-color:#444;}

.loading5 .b4{  -webkit-transform:translate(-50%,8px) rotate(-180deg); background-color:#666;}

.loading5 .b5{  -webkit-transform:translate(-50%,8px) rotate(-225deg); background-color:#888;}

.loading5 .b6{  -webkit-transform:translate(-50%,8px) rotate(-270deg); background-color:#aaa;}

.loading5 .b7{  -webkit-transform:translate(-50%,8px) rotate(-315deg); background-color:#ccc;}

.loading5 .b8{  -webkit-transform:translate(-50%,8px) rotate(-360deg); background-color:#eee;}

@-webkit-keyframes loading5{

    to{

        -webkit-transform:rotate(1turn);

    }

}

</style>

</head>

<body>

<!-- NO.1 -->

<div class="css_content">

    <div class="loading1"></div>

</div>

<!-- NO.2 -->

<div class="css_content" style="background-color:#333;">

    <div class="loading2">

        <span class="line1"></span>

        <span class="line2"></span>

        <span class="line3"></span>

        <span class="line4"></span>

        <span class="line5"></span>

    </div>

</div>

<!-- NO.3 -->

<div class="css_content" style="background-color:#FFEC73;">

    <div class="loading3"></div>

</div>

<!-- NO.4 -->

<div class="css_content">

    <div class="loading4">

        <span class="str1">L</span>

        <span class="str2">o</span>

        <span class="str3">a</span>

        <span class="str4">d</span>

        <span class="str5">i</span>

        <span class="str6">n</span>

        <span class="str7">g</span>

    </div>

</div>

<!-- NO.5 -->

<div class="css_content">

    <div class="loading5">

        <span class="b1"></span>

        <span class="b2"></span>

        <span class="b3"></span>

        <span class="b4"></span>

        <span class="b5"></span>

        <span class="b6"></span>

        <span class="b7"></span>

        <span class="b8"></span>

    </div>

</div>

</body>

</html>

利用css3制作的几个loading图的更多相关文章

  1. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  2. 利用CSS3制作网页动画

    如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...

  3. 利用css3制作毛玻璃的效果

    忙里偷闲,最近又在看许多比较酷炫的效果.现在基于jquery的插件比较多,但是很多插件的兼容性不是太好,所以原生的才是王道.在日常当中,毛玻璃已经不常见了,那是一个很久远年代的东西了.诺,下面就是毛玻 ...

  4. 第九章 利用CSS3制作网页动画

    一.CSS3变形transform 1.平移:translate(x,y) translateX(x) translateY(y) 注意:如果想只向X轴平移那么可以translateX,如果想只向X轴 ...

  5. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  6. 利用box-shadow制作loading图

    我们见过很多利用css3做的loading图,像下面这种应该是很常见的.通常制作这种loading,我们会一个标签对应一个圆,八个圆就要八个标签.但是这种做法很浪费资源.我们可以只用一个标签,然后利用 ...

  7. 利用CSS3实现图片无间断轮播图的实现思路

    前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...

  8. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  9. 使用HTML5制作loading图

    昨天发了一篇使用HTML5 canvas写的时钟的文章,今天发一篇关于使用HTML5制作loading图的文章. <!DOCTYPE html> <html> <head ...

随机推荐

  1. html用户注册界面

    html用户注册界面   先上一张简约的界面的效果图 这里是style里面的内容 <style> input[type]{ border: 1px solid darkorange; ba ...

  2. BZOJ 1923: [Sdoi2010]外星千足虫

    Description 给出几个异或方程组求解,\(n \leqslant 2000\) Sol 高斯消元. 直接消元就行,遇到自由元就直接输出,同时记录一下用到的最高行数. 复杂度不科学就可以用 b ...

  3. NVelocity介绍，NVelocity中文手册文档及实例下载

    NVelocity是什么velocity英音:[vi'lɔsiti]美音:[və'lɑsətɪ]近在做一个项目,客户要求有网站模板功能,能够自主编辑网站的风格,因为这个系统是为政府部门做子站系统,举个 ...

  4. java基本算法之快速排序

    快速排序:是找出一个元素(理论上可以随便找一个)作为基准(pivot),然后对数组进行分区操作,使基准左边元素的值都不大于基准值,基准右边的元素值 都不小于基准值,如此作为基准的元素调整到排序后的正确 ...

  5. Linux服务器jps报process information unavailable

    在Linux下执行 jps 是快速查看Java程序进程的命令,一般情况下hadoop,hbase,storm等进程都是通过jps查看,有些时候因为进程没有被正常结束,比如资源占用过大时挂掉或者没有结束 ...

  6. 3.EasyUI学习总结(三)——easyloader源码分析

    easyloader模块是用来加载jquery easyui的js和css文件的,即easyloader可以在调用的时候自动加载当前页面所需的文件,不用再自己引用, 而且它可以分析模块的依赖关系,先加 ...

  7. javaWeb项目部署到阿里云服务器步骤

    记录web项目部署到阿里云服务器步骤 (使用 web项目.阿里云服务器.Xftp.Xshell),敬请参考和指正 1.将要部署的项目打包成WAR文件格式,可以在MyEclipse.Eclipse都可以 ...

  8. 史上最简单，一步集成侧滑(删除)菜单，高仿QQ、IOS。

    重要的话 开头说,not for the RecyclerView or ListView, for the Any ViewGroup. 本控件不依赖任何父布局,不是针对 RecyclerView. ...

  9. ios如何一个证书多台设备测试

    在苹果开发者网站申请的证书,是授权mac设备的开发或者发布的证书,这意味着一个设备对应一个证书,但是99美元账号只允许生成3个发布证书,两个开发证书,这满足不了多mac设备的使用,使用p12文件可以解 ...

  10. PHP表单与验证

    一．Header()函数 标头 (header) 是服务器以 HTTP 协议传 HTML 资料到浏览器前所送出的字符串,在标头与 HTML 文件之间尚需空一行分隔. /*一．Header()函数 */ ...