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 ...
随机推荐
- codeforces 690D1 D1. The Wall (easy)(dfs)
题目链接: D1. The Wall (easy) time limit per test 0.5 seconds memory limit per test 256 megabytes input ...
- Opencv：10个步骤检测出图片中条形码
1. 原图像大小调整,提高运算效率 2. 转化为灰度图 3. 高斯平滑滤波 4.求得水平和垂直方向灰度图像的梯度差,使用Sobel算子 5.均值滤波,消除高频噪声 6.二值化 7.闭运算,填充条形码间 ...
- 自定义custom Tab Bar
iOS提供的Tab Bar比较简单,我们常常有些别样的需求,此时往往需要自行自定义Tab Bar,如下图所示: 如图所示,需要在某个页面中添加一个类 ...
- windows上搭建php环境
在Windows 7下进行PHP环境搭建,首先需要下载PHP代码包和Apache与Mysql的安装软件包. PHP版本:php-5.3.2-Win32-VC6-x86,VC9是专门为IIS定制的,VC ...
- Hadoop 修改源码以及将修改后的源码应用到部署好的Hadoop中
我的Hadoop版本是hadoop-2.7.3, 我们可以去hadoop官网下载源码hadoop-2.7.3-src,以及编译好的工程文件hadoop-2.7.3, 后者可以直接部署. 前者hadoo ...
- 查看mysql状态
命令:mysqladmin -uroot -p -h172.16.0.20 status Uptime: 14317755 Threads: 61 Questions: 187732924 Sl ...
- CoreBluetooth Central模式 Swift版
也是醉了,CB这个API到现在也没有Swift的文档.最新的文档还是3年前还是4年前的OC版的,被雷的外焦里嫩的.自己一点一点写成Swift还各种报错,最坑的是这些错误压根找不到解决方案.索性自己做个 ...
- bzoj 4753: [Jsoi2016]最佳团体【01分数规划+二分+树上背包】
01分数规划,二分答案然后把判别式变成Σp[i]-Σs[i]*mid>=0,然后树上背包判断,设f[i][j]为在i点子树里选j个的最大收益,随便背包一下就好 最丧病的是神卡常--转移的时候要另 ...
- Eclipse安装svn插件的几种方式 -- 转
1.在线安装: (1).点击 Help --> Install New Software... (2).在弹出的窗口中点击add按钮,输入Name(任意)和Location(插件的URL),点击 ...
- 522 Longest Uncommon Subsequence II 最长特殊序列 II
详见:https://leetcode.com/problems/longest-uncommon-subsequence-ii/description/ C++: 方法一: class Soluti ...