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 ...
随机推荐
- 牛人的ACM经验 （转）
一:知识点 数据结构: 1,单,双链表及循环链表 2,树的表示与存储,二叉树(概念,遍历)二叉树的 应用(二叉排序树,判定树,博弈 ...
- GDUT 积木积水 2*n 时间复杂度
题意 Description 现有一堆边长为1的已经放置好的积木,小明(对的,你没看错,的确是陪伴我们成长的那个小明)想知道当下雨天来时会有多少积水.小明又是如此地喜欢二次元,于是他把这个三维的现实问 ...
- Python3中使用PyMongo的方法详解
前言 本文主要给大家介绍的是关于在Python3使用PyMongo的方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细介绍: MongoDB存储 在这里我们来看一下Python3下Mongo ...
- 嵌入式Linux学习方法——给那些彷徨者（上）
要想学好嵌入式Linux,首先要解决两个重要问题: 1. 学什么? 2. 怎么学? 首先解决第一个问题. 嵌入式Linux的系统架构包括软件和硬件两个部分,如下图: 再来看看一个成熟的嵌入式产品的开发 ...
- Android应用开发完全退出程序的通用方法
在开发一个android应用时,有可能有N个Activity,而在每个Activity里的菜单里有个"退出程序"菜单,这里就要完全退出程序了,所以今天给大家分享的是Android应 ...
- VS2008 视图资源.rc无法加载的问题及解决方法
VS2008 视图资源.rc无法加载 1.首先先把vs关闭,然后执行 开始>>所有程序>>Mircosoft visual studio 2008>>visual ...
- AndroidManifest.xml文件详解（uses-feature） （转载）
转自:http://blog.csdn.net/think_soft/article/details/7596796 语法(SYNTAX): <uses-featureandroid:name= ...
- 深度解密Go语言之 map
目录 什么是 map 为什么要用 map map 的底层如何实现 map 内存模型 创建 map 哈希函数 key 定位过程 map 的两种 get 操作 如何进行扩容 map 的遍历 map 的赋值 ...
- J20170426-hm
ジェネリクス Generics 泛型 バルーン balloon 气球 アングルブラケット Angle bracket 尖括号 プレースホルダ Placeholder 占位符
- PAT团体程序设计天梯赛 - 模拟赛
由于本人愚笨,最后一题实在无力AC,于是只有前14题的题解Orz 总的来说,这次模拟赛的题目不算难,前14题基本上一眼就有思路,但是某些题写起来确实不太容易,编码复杂度有点高~ L1-1 N个数求和 ...