CSS3实现8种Loading效果【第二波】
今晚吃完饭回宿舍又捣鼓了另外几种Loading效果，老规矩，直接“上菜“……
注：gif图片动画有些卡顿，非实际效果！
PS：若要转载请注明出处，尊重一下作者！
第一种效果：
代码如下：
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
.loading{
width: 80px;
height: 40px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
0%,100%{
height: 40px;
background: lightgreen;
}
50%{
height: 60px;
margin-top: -20px;
background: lightblue;
}
}
.loading span:nth-child(2){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.52s;
}
第二种效果：
代码如下：
<div class="loading">
<span></span>
</div>
.loading{
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto;
margin-top:100px;
position: relative;
border:5px solid lightgreen;
-webkit-animation: turn 2s linear infinite;
}
.loading span{
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background: lightgreen;
position: absolute;
left: 50%;
margin-top: -15px;
margin-left: -15px;
-webkit-animation: changeBgColor 2s linear infinite;
}
@-webkit-keyframes changeBgColor{
0%{
background: lightgreen;
}
100%{
background: lightblue;
}
}
@-webkit-keyframes turn{
0%{
-webkit-transform: rotate(0deg);
border-color: lightgreen;
}
100%{
-webkit-transform: rotate(360deg);
border-color: lightblue;
}
}
第三种效果：
代码如下：
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
text-align: center;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-animation: load 1.04s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity:;
-webkit-transform: scale(1.2);
}
100%{
opacity: .2;
-webkit-transform: scale(.2);
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
第四种效果：
代码如下：
<div class="loading">
<span></span>
</div>
.loading{
width: 150px;
height: 8px;
border-radius: 4px;
margin: 0 auto;
margin-top:100px;
position: relative;
background: lightblue;
overflow: hidden;
}
.loading span{
display:block;
width: 100%;
height: 100%;
border-radius: 3px;
background: lightgreen;
-webkit-animation: changePosition 4s linear infinite;
}
@-webkit-keyframes changePosition{
0%{
-webkit-transform: translate(-150px);
}
50%{
-webkit-transform: translate(0);
}
100%{
-webkit-transform: translate(150px);
}
}
第五种效果：
代码如下：
<div class="loading">
<span></span>
</div>
.loading{
width: 200px;
height: 60px;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
.loading span{
width: 50px;
height: 30px;
border-radius: 50%;
background: lightgreen;
position: absolute;
top: 50%;
margin-top: -15px;
overflow: hidden;
-webkit-animation: changePosition 2.08s linear infinite;
}
@-webkit-keyframes changePosition{
0%,100%{
-webkit-transform: translate(70px);
}
20%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(0px);
}
30%{
width: 20px;
height: 60px;
margin-top:-30px;
-webkit-transform: translate(0px);
}
35%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(5px);
background: lightblue;
}
70%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(160px);
}
80%{
width: 20px;
height: 60px;
margin-top:-30px;
-webkit-transform: translate(160px);
}
85%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(155px);
background: lightgreen;
}
}
第六种效果：
代码如下：
<div class="loadEffect">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
.loadEffect{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
margin-top:100px;
}
.loadEffect span{
display: inline-block;
width: 30px;
height: 10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background: lightgreen;
position: absolute;
-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
0%{
opacity:;
}
100%{
opacity: 0.2;
}
}
.loadEffect span:nth-child(1){
left:;
top: 50%;
margin-top:-5px;
-webkit-animation-delay:0.13s;
}
.loadEffect span:nth-child(2){
left: 10px;
top: 20px;
-webkit-transform: rotate(45deg);
-webkit-animation-delay:0.26s;
}
.loadEffect span:nth-child(3){
left: 50%;
top: 10px;
margin-left: -15px;
-webkit-transform: rotate(90deg);
-webkit-animation-delay:0.39s;
}
.loadEffect span:nth-child(4){
top: 20px;
right:10px;
-webkit-transform: rotate(135deg);
-webkit-animation-delay:0.52s;
}
.loadEffect span:nth-child(5){
right:;
top: 50%;
margin-top:-5px;
-webkit-transform: rotate(180deg);
-webkit-animation-delay:0.65s;
}
.loadEffect span:nth-child(6){
right: 10px;
bottom:20px;
-webkit-transform: rotate(225deg);
-webkit-animation-delay:0.78s;
}
.loadEffect span:nth-child(7){
bottom: 10px;
left: 50%;
margin-left: -15px;
-webkit-transform: rotate(270deg);
-webkit-animation-delay:0.91s;
}
.loadEffect span:nth-child(8){
bottom: 20px;
left: 10px;
-webkit-transform: rotate(315deg);
-webkit-animation-delay:1.04s;
}
第七种效果：
代码如下：
<div class="loadEffect">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>
.loadEffect {
width: 100px;
height: 100px;
margin: 0 auto;
margin-top:100px;
position: relative;
}
.loadEffect div{
width: 100%;
height: 100%;
position: absolute;
-webkit-animation: load 2.08s linear infinite;
}
.loadEffect div span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: lightgreen;
position: absolute;
left: 50%;
margin-top: -10px;
margin-left: -10px;
}
@-webkit-keyframes load{
0%{
-webkit-transform: rotate(0deg);
}
10%{
-webkit-transform: rotate(45deg);
}
50%{
opacity:;
-webkit-transform: rotate(160deg);
}
62%{
opacity:;
}
65%{
opacity:;
-webkit-transform: rotate(200deg);
}
90%{
-webkit-transform: rotate(340deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
.loadEffect div:nth-child(1){
-webkit-animation-delay:0.2s;
}
.loadEffect div:nth-child(2){
-webkit-animation-delay:0.4s;
}
.loadEffect div:nth-child(3){
-webkit-animation-delay:0.6s;
}
.loadEffect div:nth-child(4){
-webkit-animation-delay:0.8s;
}
第八种效果：
代码如下：
<div class="loading">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>
.loading{
width: 60px;
height: 60px;
margin: 0 auto;
margin-top:100px;
position: relative;
-webkit-animation: load 3s linear infinite;
}
.loading div{
width: 100%;
height: 100%;
position: absolute;
}
.loading span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #99CC66;
position: absolute;
left: 50%;
margin-top: -10px;
margin-left: -10px;
-webkit-animation: changeBgColor 3s ease infinite;
}
@-webkit-keyframes load{
0%{
-webkit-transform: rotate(0deg);
}
33.3%{
-webkit-transform: rotate(120deg);
}
66.6%{
-webkit-transform: rotate(240deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes changeBgColor{
0%,100%{
background: #99CC66;
}
33.3%{
background: #FFFF66;
}
66.6%{
background: #FF6666;
}
}
.loading div:nth-child(2){
-webkit-transform: rotate(120deg);
}
.loading div:nth-child(3){
-webkit-transform: rotate(240deg);
}
.loading div:nth-child(2) span{
-webkit-animation-delay: 1s;
}
.loading div:nth-child(3) span{
-webkit-animation-delay: 2s;
}
PS：同样的，CSS样式代码没怎么整理，虽然东西简单，但是也是需要一些时间去做出来。所以，欢迎转载和使用，不过转载还是得注明一下出处，谢谢！
CSS3实现8种Loading效果【第二波】的更多相关文章
- CSS3实现10种Loading效果（转）
CSS3实现10种Loading效果 原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单 ...
- CSS3实现8种Loading效果【二】
CSS3实现8种Loading效果[二] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: < ...
- 【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
- CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...
- CSS3轻松实现清新 Loading 效果
至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...
- 用CSS3实现饼状loading效果
原文地址:http://visugar.com/2017/05/17/CSS3%E9%A5%BC%E7%8A%B6loading%E6%95%88%E6%9E%9C/ 写在前面 (附录有源码及效果) ...
- CSS3 的10种Loading
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...
- css3纯手写loading效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 18种CSS3loading效果完整版，兼容各大主流浏览器，提供在线小工具使用
今天把之前分享的两篇博客<CSS3实现10种Loading效果>和 <CSS3实现8种Loading效果[二]>整理了一下.因为之前所分享的各种loading效果都只是做了we ...
随机推荐
- error: property's synthesized getter follows Cocoa naming convention for returning 'owned' objects
出现这样的情况,主要是属性名中包括 keyword. You can solve this by: Renaming that property: @property (strong, nonato ...
- Hibernate级联操作和载入机制（二） cascade and fetch
上一篇介绍了Hibernate持久化对象时候的级联操作.本篇介绍读取时候的级联操作. 还是用上一篇的样例.一份问卷有多个问题.可是每一个问题仅仅能属于一份问卷. 我们先看測试用例: @Test pub ...
- MDK常见错误详解集合
错误代码及错误信息 错误释义 error 1: Out of memory 内存溢出 error 2: Identifier expected 缺标识符 error 3: Unknown identi ...
- 新安装的linux（linux mint 或则ubuntu）系统中安装postgresql-xc安装的包
一:./configure的时候1,gcc的处理:sudo apt-get install clang && rvm install 1.9.3 --with-gcc=clang2,缺 ...
- C# 网络编程 Part.1
本人也是新手,对网络编程一窍不通,所以从今天开始我将学习网络编程的基础知识,在此一一贴出来,编辑成一个系列! 1.为自己复习巩固用 2.可以找到同时在学习网络编程的同学,一起讨论交流,促进学习效率及其 ...
- PHP学习笔记3-逻辑运算符
逻辑运算符图解: 逻辑且&&: <?php /** * Created by PhpStorm. * User: Administrator * Date: 2015/6/26 ...
- vim 小技巧总结
1.v+移动光标可以选中文本. 2.y可以复制已经选中的文本 3.p可以粘贴 复制一行则:yy 复制当前光标所在的位置到行尾:y$ 复制当前光标所在的位置到行首:y^ 复制三行则:3yy,即从当前光标 ...
- iOS判断字符串是否包含表情字符
- (BOOL)isContainsEmoji:(NSString *)string { __block BOOL isEomji = NO; [, [string length]) options: ...
- poj 3368 Frequent values（段树）
Frequent values Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 13516 Accepted: 4971 ...
- [LeetCode] Decode Ways [33]
题目 A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A ...