css3纯手写loading效果
<!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效果的更多相关文章
- 超级简单的jQuery纯手写五星评分效果
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
- springmvc 动态代理 JDK实现与模拟JDK纯手写实现。
首先明白 动态代理和静态代理的区别: 静态代理:①持有被代理类的引用 ② 代理类一开始就被加载到内存中了(非常重要) 动态代理:JDK中的动态代理中的代理类是动态生成的.并且生成的动态代理类为$Pr ...
- CSS3实现8种Loading效果【第二波】
原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...
- 简易-五星评分-jQuery纯手写
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
- CSS3实现10种Loading效果（转）
CSS3实现10种Loading效果 原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单 ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- CSS3实现8种Loading效果【二】
CSS3实现8种Loading效果[二] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: < ...
- 纯手写Myatis框架
1.接口层-和数据库交互的方式 MyBatis和数据库的交互有两种方式: 使用传统的MyBatis提供的API: 使用Mapper接口: 2.使用Mapper接口 MyBatis 将配置文件中的每一个 ...
- SQL纯手写创建数据库到表内内容
建表啥的只点点鼠标,太外行了,不如来看看我的纯手写,让表从无到有一系列:还有存储过程临时表,不间断的重排序: 一:建数据库 create Database Show on primary ( name ...
随机推荐
- SPOJ:PATHETIC STRINGS(分配问题&贪心)
Problem statement: A string is said to be “PATHETIC” if all the characters in it are repeated the sa ...
- UVA140 剪枝
题目 分析:这个题的数据范围很小,直接打印全排列去判断也能过,但是这里存在两个剪枝,第一个,如果当前的距离已经大于前面距离的最小值,则剪枝,还有一个就是如果与当前结点相连的边数大于等于前面距离的最小值 ...
- 【NOIP2016】 组合数问题
[题目链接] 点击打开链接 [算法] 杨辉三角 + 二维前缀和 O(1)计算答案 [代码] #include<bits/stdc++.h> using namespace std; #de ...
- ng2中文文档地址
https://angular.cn/docs/ts/latest/guide/displaying-data.html
- 用 SDL2 处理精灵图
上面就是一个精灵图,由多个固定间隔的图标组成.利用精灵图的好处就是不必将图标逐个读入内存进行操作.我们可以将精灵图中需要的部分用一个个矩形截取下来,然后再输出到渲染器上. 环境:SDL2 + VC++ ...
- windows下patch
经常在网上看到有人发布patch文件来更新他们的开源代码,例如cegui.ogre等都使用这种形式来修bug或者增加一些小功能.但是,我们下载到的patch文件,貌似是linux/unix的diff工 ...
- sscanf非常的重要
刚进研究生阶段,发现曾经学习的c语言真的好少好少,很少能够看见scanf printf等..... 以后实验的80%以上都是在linux下面 老师让我看看关于一个日志会聚的一个项目模块 发现基本上都是 ...
- hdoj5792 【树状数组】【未完待续】
题意: 求有多少种四个数满足Aa < Ab,Ac > Ad,1 < =a < b < = n ,1 < = c < d < = n ; 思路: 只要找到 ...
- Python基础:一起来面向对象 (二) 之搜索引擎
实例 搜索引擎 一个搜索引擎由搜索器.索引器.检索器和用户接口四个部分组成 搜索器就是爬虫(scrawler),爬出的内容送给索引器生成索引(Index)存储在内部数据库.用户通过用户接口发出询问(q ...
- springboot&mybatis 增删改查系列（二）
数据库篇 我的数据库名为data0525,数据表名为user,其中有五列uid,uname,upass,usex,umessage.uid为主键并且自动生成,由于是练习表,所以并没有考虑设计的合理性. ...