<!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. POJ - 1236 Network of Schools(有向图的强连通分量)

    d.各学校之间有单向的网络,每个学校得到一套软件后,可以通过单向网络向周边的学校传输, 问题1:初始至少需要向多少个学校发放软件,使得网络内所有的学校最终都能得到软件. 问题2:至少需要添加几条传输线 ...

  2. 机器学习 Hidden Markov Models 3

    Viterbi Algorithm 前面我们提到过,HMM的第二类问题是利用HMM模型和可观察序列寻找最有可能生成该观察序列的隐藏变量的序列.简单来说,第一类问题是通过模型计算生成观察序列的概率,而第 ...

  3. 「HNSDFZ暑期集训 测试1」「LuoguT36485」 括号(贪心

    Description 给定一个由左括号'('和右括号')'组成的字符串s,其中第i个括号的权值为ai. 我们定义一个括号序列t为合法括号序列,当且仅当满足下列条件之一: 1.t为空串 2.t=(A) ...

  4. npm 基本命令行

    npm是随同NodeJS一起安装的包管理工具. 检查版本 npm -v 升级npm npm install npm -g 使用淘宝镜像升级 cnpm install npm -g npm instal ...

  5. [laravel]phpunit

    step1.install phpunit composer.json require中增加 "phpunit/phpunit":"4.0.*" 执行 comp ...

  6. 【转】设置cocos2dx 屏幕分辨率

    [转载连接:]http://www.cnblogs.com/onlycxue/p/3500026.html 做手机上的软件首先要考虑的就是屏幕分辨率怎么解决.coco2dx已经有了很好的解决方法. 用 ...

  7. BZOJ3996 线性代数

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3996 转化题目给的条件 $$D = \sum_{i=1}^n \sum_{j=1}^n{A(i ...

  8. 2.28 MapReduce在实际应用中常见的优化

    一.优化的点 Reduce Task Number Map Task输出压缩 Shuffle Phase 参数 map.reduce分配的虚拟CPU 二.Reduce Task Number Redu ...

  9. 网络爬虫之requests模块的使用+Github自动登入认证

    本篇博客将带领大家梳理爬虫中的requests模块,并结合Github的自动登入验证具体讲解requests模块的参数. 一.引入:   我们先来看如下的例子,初步体验下requests模块的使用: ...

  10. SimpleDateFormat并发隐患及其解决

    此文已由作者姚太行授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. SimpleDateFormat被大量使用于处理时间格式化过程,由于该类在创建时会指定一个pattern用于 ...