（转）css3实现load效果
本文转自：https://www.cnblogs.com/jr1993/p/4625628.html 谢谢作者
注：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;
}
PS：同样的，CSS样式代码没怎么整理，虽然东西简单，但是也是需要一些时间去做出来。
（转）css3实现load效果的更多相关文章
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- css3的transition效果和transfor效果
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css3幻灯片换位效果
<title>css3幻灯片换位效果</title> <style type="text/css"> .flowGallery {width: ...
- 第八十节，CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释 CSS3 ...
- html+css3实现长方体效果
网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看. 2017-07-25 21:30:23 h ...
- Css3实现波浪效果3-静态波纹
一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...
- 测试css3的动画效果在display:none的时候不耗费性能
也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...
- css3写下雨效果
css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...
- 一款基于jQuery/CSS3实现拼图效果的相册
之前为大家介绍了 HTML5 3D立体图片相册, HTML5图片相册重力感应特效, 基于CSS3图片可倾斜摆放的动画相册 今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度 ...
随机推荐
- BNF
Backus-Naur Form, 巴科斯-诺尔 范式:一种描述高级语言语法的表示法. BNF 符号概览 符号 描述 ::= 该符号左边的元素被该符号右边的结构所定义 *: 该符号前面的结构可以重复零 ...
- mvc项目用log4net 记录错误日志
1. 首先下载lognet 下载地址 http://logging.apache.org/log4net/download_log4net.cgi 2.找到bin文件中的net文件夹 之后看你电脑 ...
- keepalive实现MGR的自动切换（二）
10.0.0.7 lemon 10.0.0.8 lemon2 10.0.0.9 lemon3 程序代码里只需写一个VIP连接数据库即可,后面是连接在哪一台通过,keepalived的在服务端实现: ...
- Mysql常见的优化策略
数据库设计方面优化 1.数据库设计符合第三范式,为了查询方便可以有一定的数据冗余.2.选择数据类型优先级 int > date,time > enum,char>varchar &g ...
- 【java】类的继承
继承:特殊类拥有一般类的全部属性与行为. 继承好处:1.提高了代码的复用性2.让类与类之前产生了关系,有了这个关系才有多态的特性.继承是类和类之前的关系. 注意事项: 1.java只支持单继承,不支持 ...
- [转]ANTS Performance Profiler和ANTS Memory Profiler 使用
.NET性能调优之一:ANTS Performance Profiler的使用 .NET性能调优系列文章 系列文章索引 .NET性能调优之一:ANTS Performance Profiler的使 ...
- 【python】dist-packages和site-packages的区别
一.dist-packages和site-packages的区别 sudo apt-get install 安装的package存放在/usr/lib/python2./dist-packages目录 ...
- ubuntu18.04 安装mysql server
mysql 5.7支持的最高版本是Ubuntu17 ,即使安装成功后,也会出现各种妖蛾子,本人就被这种问题困扰了好一会.在Ubuntu 18.04下安装mysql,建议安装8.0以上版本! 1. 配置 ...
- python中 函数名加括号与不加括号
加括号是返回函数的结果,不加括号相当于函数的调用.
- ORM对象关系映射
ORM 总结: ORM:对象关系映射 作用: 1.将定义数据库模型类--> 数据库表 2.将定义数据库模型类中的属性--->数据库表字段 3.将模型对象的操作(add,delete,com ...