<!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. codevs矩阵乘法系列

    T1:矩阵乘法板子题,练手. #include <map> #include <set> #include <cmath> #include <ctime&g ...

  2. 子元素margin带动父元素拖动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. POJ3304:Segments （几何：求一条直线与已知线段都有交点）

    Given n segments in the two dimensional space, write a program, which determines if there exists a l ...

  4. Superprime Rib

    链接 分析:满足题目条件的必然是1,2,3,5,7,9这几个数字的组合,DFS按位进行即可,边组合边判断是否合法. /* PROB:sprime ID:wanghan LANG:C++ */ #inc ...

  5. 【前端】CentOS 7 系列教程之五： 安装最新版 nginx 并转发 node 服务

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/linux_5.html 进入/usr/local目录 cd /usr/local 下载最新版的ngxin压缩包 w ...

  6. JAVA Synchronized （三） volatile 与 synchronized 的比较

    一,volatile关键字的可见性 要想理解volatile关键字,得先了解下JAVA的内存模型,Java内存模型的抽象示意图如下: 从图中可以看出: ①每个线程都有一个自己的本地内存空间--线程栈空 ...

  7. 洛谷 - P2774 - 方格取数问题 - 二分图最大独立点集 - 最小割

    https://www.luogu.org/problemnew/show/P2774 把两个相邻的节点连边,这些边就是要方便最小割割断其他边存在的,容量无穷. 这种类似的问题的话,把二分图的一部分( ...

  8. 51nod1174【基于线段树的RMQ】

    很基础啊~ #include <bits/stdc++.h> using namespace std; typedef long long LL; const int INF=-0x3f3 ...

  9. vector刘汝佳算法入门学习笔记

    //*****-*-----vector***/////// 常用操作封装,a.size();可以读取大小               a.resize();可以改变大小:               ...

  10. Django学习:模板继承和配置静态文件

    一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...