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 ...
随机推荐
- 「LuoguP2170」 选学霸（01背包
Description 老师想从N名学生中选M人当学霸,但有K对人实力相当,如果实力相当的人中,一部分被选上,另一部分没有,同学们就会抗议.所以老师想请你帮他求出他该选多少学霸,才能既不让同学们抗议, ...
- 我的Android笔记（十）—— ProgressDialog的简单应用，等待提示 （转载）
转自:http://blog.csdn.net/barryhappy/article/details/7376231 在应用中经常会用到一些费时的操作,需要用户进行等待,比如加载网页内容…… 这时候就 ...
- ORACLE PL/SQL 实例精解之第七章 迭代控制之二
7.1CONTINUE语句 CONTINUE语句会导致循环终止当前迭代.并且当CONTINUE的条件为TRUE时,开始执行该循环的下一次迭代.需要借助于IF语句来计算COUNTINUE条件.当CONT ...
- nodejs实现百度实时推送
想要加快百度收录,肯定免不了链接提交吧,当然链接提交的方式有很多种,今天来说一下百度的实时推送.. 第一次看到这post请求确实有点萌逼,我自己是做前端的对后台接触确实不多,见到的前端发送post请求 ...
- （水题）Codeforces - 630H - Benches
https://codeforces.com/problemset/problem/630/H 又一个组合数学的问题,我们先考虑在 $n$ 列中选出 $5$ 列来放椅子,然后对第一列有 $n$ 种放法 ...
- UILabel和UIButton添加下划线
关于UILabel和UIButton有的时候需要添加下划线,一般有两种方式通过默认的 NSMutableAttributedString设置,第二种就是在drawRect中画一条下划线,本文就简单的选 ...
- Unity3D NGUI UIPlayTween(原UIButtonTween)动画事件详解
http://blog.csdn.net/asd237241291/article/details/8507817 原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 Unity3D引擎技术 ...
- Nginx(四) nginx+consul+upasync 在ubnutu18带桌面系统 实现动态负载均衡
1.1 什么是动态负载均衡 传统的负载均衡,如果Upstream参数发生变化,每次都需要重新加载nginx.conf文件,因此扩展性不是很高,所以我们可以采用动态负载均衡,实现Upstream可配置化 ...
- 删除一个ppa
https://itsfoss.com/how-to-remove-or-delete-ppas-quick-tip/ 总结如下: 1: 桌面删除,进入software & update,然后 ...
- SpringBoot | 读取配置文件信息
server.port=8081 #修改端口号 server.servlet.context-path= /SpringBoot #修改URL #自定义配置 tz.name = xiaoming tz ...