CSS3 loading加载动画
先介绍3种loading效果,喜欢的话收藏一下吧~
一、loading效果1
<div class="loading">
<h2>wait for loading</h2>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
body{
background:#222;
}
.loading {
width:200px;
height:200px;
text-align: center;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
.loading h2 {
color: #ccc;
margin: 0;
font: .8em verdana;
text-transform: uppercase;
letter-spacing: .1em;
}
.loading span {
display: inline-block;
vertical-align: middle;
width: .6em;
height: .6em;
margin: .18em;
background: #007DB6;
border-radius: .6em;
animation: loading 1s infinite alternate;
}
.loading span:nth-of-type(2) {
background: #008FB2;
animation-delay: 0.2s;
}
.loading span:nth-of-type(3) {
background: #009B9E;
animation-delay: 0.4s;
}
.loading span:nth-of-type(4) {
background: #00A77D;
animation-delay: 0.6s;
}
.loading span:nth-of-type(5) {
background: #00B247;
animation-delay: 0.8s;
}
.loading span:nth-of-type(6) {
background: #5AB027;
animation-delay: 1.0s;
}
.loading span:nth-of-type(7) {
background: #A0B61E;
animation-delay: 1.2s;
}
@keyframes loading {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
二、loading效果2
<div class="loader">
<p></p>
</div>
.loader {
width: 100px;
height: 100px;
border: 6px solid;
border-top-color: hsl(154, 100%, 31%);
border-left-color: hsl(216, 87%, 52%);
border-bottom-color: hsl(8, 66%, 50%);
border-right-color: hsl(42, 100%, 51%);
border-radius: 50%;
transform: rotate(45deg);
position: absolute;
margin: auto;
left:0;
right:0;
top:0;
bottom:0;
}
p {
display: inline-block;
width: 100px;
height: 100px;
background: linear-gradient(90deg, hsla(212, 67%, 36%, 0) 0%, hsla(207, 69%, 51%, 0)76%, hsla(0, 0%, 100%, 1)85%, hsla(0, 0%, 100%, 1)100%);
border: 8px solid transparent;
background-origin:border-box;
border-radius: 50%;
box-shadow: inset -999px 0 0 transparent;
/* transform: translate(-8px, 55px); */
transform: translate(-8px, -24px);
animation: loading 1s linear infinite;
}
@keyframes loading {
0% {
/* transform: translate(-9px, -25px) rotate(0deg); */
transform: translate(-8px, -24px) rotate(0deg);
}
100% {
transform: translate(-8px, -24px) rotate(360deg);
}
}
三、loading效果3
<div class="loader">
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
<div class="covers">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
* {
box-sizing: border-box;
overflow: hidden;
}
body{
padding-top:10em;
text-align:center;
}
.loader {
position: relative;
margin: auto;
width: 350px;
color: white;
font-family: "Roboto Condensed", sans-serif;
font-size: 250%;
background: linear-gradient(180deg, #222 0, #444 100%);
box-shadow: inset 0 5px 20px black;
text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.loader:after {
content: "";
display: table;
clear: both;
}
.loader span {
float: left;
height: 100px;
line-height: 120px;
width: 50px;
}
.loader>span {
border-left: 1px solid #444;
border-right: 1px solid #222;
}
.loader .covers {
position: absolute;
height: 100%;
width: 100%;
}
.covers span {
background: linear-gradient(180deg, white 0, #ddd 100%);
animation: up 2s infinite;
}
@keyframes up {
0% {
margin-bottom: 0;
}
16% {
margin-bottom: 100%;
height: 20px;
}
50% {
margin-bottom: 0;
}
100% {
margin-bottom: 0;
}
}
.covers span:nth-child(2) {
animation-delay: .142857s;
}
.covers span:nth-child(3) {
animation-delay: .285714s;
}
.covers span:nth-child(4) {
animation-delay: .428571s;
}
.covers span:nth-child(5) {
animation-delay: .571428s;
}
.covers span:nth-child(6) {
animation-delay: .714285s;
}
.covers span:nth-child(7) {
animation-delay: .857142s;
}