<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>圆形旋转loading</title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            .box{

                width: 50px;

                height:50px;

                margin: 100px;

                position: absolute;

            }

            .box:nth-of-type(2){

                transform: rotate(45deg);

            }

            .box p{

                width: 15px;

                height: 15px;

                background: #0000FF;

                border-radius: 50%;

                position: absolute;

                animation: run 1.5s infinite linear;

            }

            .box p:nth-of-type(1){ /*左上*/

                left: 0;

                top: 0;

            }

            .box p:nth-of-type(2){ /*右上*/

                right: 0;

                top: 0;

            }

            .box p:nth-of-type(3){ /*左下*/

                left: 0;

                bottom: 0;

            }

            .box p:nth-of-type(4){ /*右下*/

                right: 0;

                bottom: 0;

            }

            /*动画效果*/

            @keyframes run{

                0%{

                    transform: scale(0);

                }

                50%{

                    transform: scale(1);

                }

                100%{

                    transform: scale(0);

                }

            }

            /*延迟动画效果   负值是解决蹦动的效果*/

            .box:nth-of-type(1) p:nth-of-type(1){

                animation-delay: -0.1s;

            }

            .box:nth-of-type(2) p:nth-of-type(1){

                animation-delay: -0.3s;

            }

            .box:nth-of-type(1) p:nth-of-type(2){

                animation-delay: -0.5s;

            }

            .box:nth-of-type(2) p:nth-of-type(2){

                animation-delay: -0.7s;

            }

            .box:nth-of-type(1) p:nth-of-type(3){

                animation-delay: -0.9s;

            }

            .box:nth-of-type(2) p:nth-of-type(3){

                animation-delay: -1.1s;

            }

            .box:nth-of-type(1) p:nth-of-type(4){

                animation-delay: -1.3s;

            }

            .box:nth-of-type(2) p:nth-of-type(4){

                animation-delay: -1.5s;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <p></p>

            <p></p>

            <p></p>

            <p></p>

        </div>

        <div class="box">

            <p></p>

            <p></p>

            <p></p>

            <p></p>

        </div>

    </body>

</html>

css3纯手写loading效果的更多相关文章

  1. 超级简单的jQuery纯手写五星评分效果

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  2. springmvc 动态代理 JDK实现与模拟JDK纯手写实现。

    首先明白 动态代理和静态代理的区别: 静态代理:①持有被代理类的引用  ② 代理类一开始就被加载到内存中了(非常重要) 动态代理:JDK中的动态代理中的代理类是动态生成的.并且生成的动态代理类为$Pr ...

  3. CSS3实现8种Loading效果【第二波】

    原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...

  4. 简易-五星评分-jQuery纯手写

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  5. CSS3实现10种Loading效果（转）

    CSS3实现10种Loading效果  原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单 ...

  6. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  7. CSS3实现8种Loading效果【二】

    CSS3实现8种Loading效果[二]   今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: < ...

  8. 纯手写Myatis框架

    1.接口层-和数据库交互的方式 MyBatis和数据库的交互有两种方式: 使用传统的MyBatis提供的API: 使用Mapper接口: 2.使用Mapper接口 MyBatis 将配置文件中的每一个 ...

  9. SQL纯手写创建数据库到表内内容

    建表啥的只点点鼠标,太外行了,不如来看看我的纯手写,让表从无到有一系列:还有存储过程临时表,不间断的重排序: 一:建数据库 create Database Show on primary ( name ...

随机推荐

  1. HDU - 1875 畅通工程再续（最小生成树）

    d.c个小岛,通过建立桥,使其全部可达.求所有的桥的最小长度和. s.最小生成树,数据改成double就行了 c.Prim算法:cost[a][b]和cost[b][a]都得赋值. /* Prim算法 ...

  2. 最大网络流 EK 算法

    网络流是什么类型的问题,看一道题目你就知道了 点击打开链接 . 默认具备图论的基本知识,网络流概念比较多,先看看书熟悉一下那些概念.比较好!一个寄出的网络最大流.EK算法写的. 这是一幅网络,求S   ...

  3. (转）Vim自动补全神器：YouCompleteMe

    原文出处:http://blog.jobbole.com/58978/ 第一次听说这个插件还是在偶然的情况下看到别人的博客,听说了这个插件的大名.本来打算在实训期间来完成安装的,无奈网实在不给力,也就 ...

  4. macbook pro 下eclipse配置svn插件

    eclipse中最常使用的SVN插件是subclipse,先到subclipse官网:http://subclipse.tigris.org下载该插件.   如上图,点击“Download and I ...

  5. IOCP编程小结（上）

    前段时间接手了一个网络游戏前端连接服务器的开发工作,由于服务器需要在windows平台上部署,并且需要处理大量的客户端连接,因此采用IOCP来做为服务器端的编程模型就成了不二选择.虽然我对服务器开发并 ...

  6. AES加密算法动画演示

    波士顿大学的Howard Straubing做了这么一个动画来展示AES加密算法的演示,挺不错的. 点击这里看全屏

  7. 改造u3d第一人称控制器，使之适合Cardboard+蓝牙手柄控制

    一.在u3d编辑器中删除FPSController游戏对像中自带的Camera: 二.在u3d编辑器中将CardBoardMain游戏对像添加到FPSController的子物体: 三.修改脚本: 1 ...

  8. float以后设置的小细节

    先看看下面这段css代码,是不是很完美?没错? #pageBodyMain .articleList a: after { content: ""; clear: both; di ...

  9. poj1159 【LCS】

    思路: 滚动数组; 贴一发挫code- #include <iostream> #include <cstdio> #include <string.h> #inc ...

  10. python property的2种使用方法

    一.property类 class Person(): def __init__(self, name): self.set_name(name) def get_name(self): return ...