CSS3实现10种Loading效果

Posted UI设计自学平台

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3实现10种Loading效果相关的知识,希望对你有一定的参考价值。

51RGB

昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记……


第1种效果:

CSS3实现10种Loading效果

loading1

代码如下:

<div class="loading">

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

</div>


css部分:

.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 1s ease infinite;

}

@-webkit-keyframes load{

0%,100%{

height: 40px;

background: lightgreen;

}

50%{

height: 70px;

margin: -15px 0;

background: lightblue;

}

}

.loading span:nth-child(2){

-webkit-animation-delay:0.2s;

}

.loading span:nth-child(3){

-webkit-animation-delay:0.4s;

}

.loading span:nth-child(4){

-webkit-animation-delay:0.6s;

}

.loading span:nth-child(5){

-webkit-animation-delay:0.8s;

}

第2种效果:

CSS3实现10种Loading效果



loading2

代码如下:


<div class="loading">

<span></span>

</div>

.loading{

width: 150px;

height: 4px;

border-radius: 2px;

margin: 0 auto;

margin-top:100px;

position: relative;

background: lightgreen;

-webkit-animation: changeBgColor 1.04s ease-in infinite alternate;

}

.loading span{

display: inline-block;

width: 16px;

height: 16px;

border-radius: 50%;

background: lightgreen;

position: absolute;

margin-top: -7px;

margin-left:-8px;

-webkit-animation: changePosition 1.04s ease-in infinite alternate;

}

@-webkit-keyframes changeBgColor{

0%{

background: lightgreen;

}

100%{

background: lightblue;

}

}

@-webkit-keyframes changePosition{

0%{

background: lightgreen;

}

100%{

margin-left: 142px;

background: lightblue;

}

}

第3-5种效果:

CSS3实现10种Loading效果

loading3

CSS3实现10种Loading效果

loading4

CSS3实现10种Loading效果

代码如下:


<div class="loading">

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

</div>

第3-5种效果的css样式分别为:


.loading{

width: 150px;

height: 15px;

margin: 0 auto;

margin-top:100px;

}

.loading span{

display: inline-block;

width: 15px;

height: 100%;

margin-right: 5px;

border-radius: 50%;

background: lightgreen;

-webkit-animation: load 1.04s ease infinite;

}

.loading span:last-child{

margin-right: 0px;

}

@-webkit-keyframes load{

0%{

opacity: 1;

}

100%{

opacity: 0;

}

}

.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;

}

.loading{

width: 150px;

height: 15px;

margin: 0 auto;

margin-top:100px;

}

.loading span{

display: inline-block;

width: 15px;

height: 100%;

margin-right: 5px;

border-radius: 50%;

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.3);

}

100%{

opacity: 0.2;

-webkit-transform: scale(.3);

}

}

.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;

}

.loading{

width: 150px;

height: 15px;

margin: 0 auto;

position: relative;

margin-top:100px;

}

.loading span{

position: absolute;

width: 15px;

height: 100%;

border-radius: 50%;

background: lightgreen;

-webkit-animation: load 1.04s ease-in infinite alternate;

}

@-webkit-keyframes load{

0%{

opacity: 1;

-webkit-transform: translate(0px);

}

100%{

opacity: 0.2;

-webkit-transform: translate(150px);

}

}

.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;

}

第6-8种效果:

CSS3实现10种Loading效果

loading6

CSS3实现10种Loading效果

loading7

CSS3实现10种Loading效果

代码如下:


<div class="loading">

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

</div>

第6-8种效果的css样式分别为:


.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;

}

100%{

opacity: 0;

}

}

.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;

}

.loading{

width: 150px;

height: 15px;

margin: 0 auto;

margin-top:100px;

}

.loading span{

display: inline-block;

width: 15px;

height: 100%;

margin-right: 5px;

background: lightgreen;

-webkit-transform-origin: right bottom;

-webkit-animation: load 1s ease infinite;

}

.loading span:last-child{

margin-right: 0px;

}

@-webkit-keyframes load{

0%{

opacity: 1;

}

100%{

opacity: 0;

-webkit-transform: rotate(90deg);

}

}

.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;

}

.loading{

width: 150px;

height: 15px;

margin: 0 auto;

margin-top:100px;

}

.loading span{

display: inline-block;

width: 15px;

height: 100%;

margin-right: 5px;

background: lightgreen;

-webkit-transform-origin: right bottom;

-webkit-animation: load 1s ease infinite;

}

.loading span:last-child{

margin-right: 0px;

}

@-webkit-keyframes load{

0%{

opacity: 1;

-webkit-transform: scale(1);

}

100%{

opacity: 0;

-webkit-transform: rotate(90deg) scale(.3);

}

}

.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;

第9-10种效果:

CSS3实现10种Loading效果

loading9

CSS3实现10种Loading效果

loading10


代码如下:


<div class="loadEffect">

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

</div>

CSS样式分别为:


.loadEffect{

width: 100px;

height: 100px;

position: relative;

margin: 0 auto;

margin-top:100px;

}

.loadEffect span{

display: inline-block;

width: 16px;

height: 16px;

border-radius: 50%;

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:-8px;

-webkit-animation-delay:0.13s;

}

.loadEffect span:nth-child(2){

left: 14px;

top: 14px;

-webkit-animation-delay:0.26s;

}

.loadEffect span:nth-child(3){

left: 50%;

top: 0;

margin-left: -8px;

-webkit-animation-delay:0.39s;

}

.loadEffect span:nth-child(4){

top: 14px;

right:14px;

-webkit-animation-delay:0.52s;

}

.loadEffect span:nth-child(5){

right: 0;

top: 50%;

margin-top:-8px;

-webkit-animation-delay:0.65s;

}

.loadEffect span:nth-child(6){

right: 14px;

bottom:14px;

-webkit-animation-delay:0.78s;

}

.loadEffect span:nth-child(7){

bottom: 0;

left: 50%;

margin-left: -8px;

-webkit-animation-delay:0.91s;

}

.loadEffect span:nth-child(8){

bottom: 14px;

left: 14px;

-webkit-animation-delay:1.04s;

}

.loadEffect{

width: 100px;

height: 100px;

position: relative;

margin: 0 auto;

margin-top:100px;

}

.loadEffect span{

display: inline-block;

width: 20px;

height: 20px;

border-radius: 50%;

background: lightgreen;

position: absolute;

-webkit-animation: load 1.04s ease infinite;

}

@-webkit-keyframes load{

0%{

-webkit-transform: scale(1.2);

opacity: 1;

}

100%{

-webkit-transform: scale(.3);

opacity: 0.5;

}

}

.loadEffect span:nth-child(1){

left: 0;

top: 50%;

margin-top:-10px;

-webkit-animation-delay:0.13s;

}

.loadEffect span:nth-child(2){

left: 14px;

top: 14px;

-webkit-animation-delay:0.26s;

}

.loadEffect span:nth-child(3){

left: 50%;

top: 0;

margin-left: -10px;

-webkit-animation-delay:0.39s;

}

.loadEffect span:nth-child(4){

top: 14px;

right:14px;

-webkit-animation-delay:0.52s;

}

.loadEffect span:nth-child(5){

right: 0;

top: 50%;

margin-top:-10px;

-webkit-animation-delay:0.65s;

}

.loadEffect span:nth-child(6){

right: 14px;

bottom:14px;

-webkit-animation-delay:0.78s;

}

.loadEffect span:nth-child(7){

bottom: 0;

left: 50%;

margin-left: -10px;

-webkit-animation-delay:0.91s;

}

.loadEffect span:nth-child(8){

bottom: 14px;

left: 14px;

-webkit-animation-delay:1.04s;

}

CSS3实现10种Loading效果

想认识志同道合的朋友一起学习web

丰富的学习资源,周一到周四免费直播公开课

CSS3实现10种Loading效果
每天直播公开课在线视频和下载




你可能感兴趣的精彩内容

微信:UI设计自学平台 加关注




长按关注:UI设计自学平台》


点击下方 阅读原文进入51rgb官网哦!
↓↓↓



以上是关于CSS3实现10种Loading效果的主要内容,如果未能解决你的问题,请参考以下文章

CSS3轻松实现清新 Loading 效果

CSS3轻松实现清新 Loading 效果

CSS3轻松实现清新 Loading 效果

HTML5+CSS3 loading 效果收集

HTML5+CSS3 loading 效果收集--转载

css3实现loading效果