CSS3实现8种Loading效果【二】
今晚吃完饭回宿舍又捣鼓了另外几种Loading效果，老规矩，直接“上菜“……
注：gif图片动画有些卡顿，非实际效果！
第一种效果：
代码如下：
<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: 1;
-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: 1;
}
100%{
opacity: 0.2;
}
}
.loadEffect span:nth-child(1){
left: 0;
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: 0;
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: 1;
-webkit-transform: rotate(160deg);
}
62%{
opacity: 0;
}
65%{
opacity: 0;
-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;
}
CSS3实现8种Loading效果【二】的更多相关文章
- CSS3实现8种Loading效果【第二波】
原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...
- CSS3实现10种Loading效果（转）
CSS3实现10种Loading效果 原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单 ...
- 【转】 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 ...
随机推荐
- yii---左查询使用
看到一些做关联查询的示例,例如使用hasMany(一对多),还是有一个hasOne(一对一)的,没有细看,下面是我看到的一个比较好用的一个: $query = (new \yii\db\Query() ...
- Spark2 Dataset持久化存储级别StorageLevel
import org.apache.spark.storage.StorageLevel // 数据持久缓存到内存中//data.cache()data.persist() // 设置缓存级别data ...
- 使用Xstart远程图形化Linux
进入桌面以后su - 输入密码切换到root用户 rcc命令调出RoseMirrorHa页面进行操作
- bootstrapValidator remote 的接受 验证 值
本来之前也做过一次这样的验,但可能是这两天太热脑袋不够用了,于是就只有看看源码咯 that.updateStatus(updateAll ? $f.attr('data-bv-field') : $f ...
- POJ3660 Cow Contest【最短路-floyd】
N (1 ≤ N ≤ 100) cows, conveniently numbered 1..N, are participating in a programming contest. As we ...
- android bluetooth
Android bluetooth介绍(一):基本概念及硬件接口 BlueZ为调试和与蓝牙子系统通信提供很多设置命令行工具,包含下面这些: hciconfig hcitool hcidump sdpt ...
- vue-cli搭建vue项目更新
vue-cli搭建vue项目更新 更新之前一篇博客错误的地方,在使用vue init webpack xxx 之后并不需要使用npm install 下载依赖包,而是直接根据提示 打开文件夹 再npm ...
- oracle(二)V$lock 视图中ID1 , ID2 列的含义
1.在Table Locks(TM)中 ID1为对象的id, ID2为0 在Row Locks(TX)中 ID1为Undo Segmen Number与该事务在该回滚段的事务表(Transaction ...
- 划分LUN
划分LUN http://mp.weixin.qq.com/s?__biz=MzAwNzU3NzQ0MA==&mid=209842199&idx=1&sn=7d77fdf7a8 ...
- SQLCE数据工具(Flyhoward Ltd SDF Viewer)
SDF Viewer sdf数据库创建编辑查看 官方下载地址 http://www.flyhoward.com/Download_SDF_Viewer.aspx 用户名:www.cr173.com注 ...