您现在的位置是：网站首页 > 心得笔记
网页中常用的各种loading集合
简介这里通过css总结几个常用的加载中动画
1、html代码
<section> <div class="rotating-plane"></div> </section> <section> <div class="double-bounce"> <div class="child double-bounce-1"></div> <div class="child double-bounce-2"></div> </div> </section> <section> <div class="wave"> <div class="rect rect-1"></div> <div class="rect rect-2"></div> <div class="rect rect-3"></div> <div class="rect rect-4"></div> <div class="rect rect-5"></div> </div> </section> <section> <div class="cubes"> <div class="cube cube-1"></div> <div class="cube cube-2"></div> </div> </section> <section> <div class="spinner"></div> </section> <section> <div class="dots"> <div class="child dot-1"></div> <div class="child dot-2"></div> </div> </section> <section> <div class="three-bounce"> <div class="child bounce-1"></div> <div class="child bounce-2"></div> <div class="child bounce-3"></div> </div> </section> <section> <div class="circle-bounce"> <div class="child circle-1"></div> <div class="child circle-2"></div> <div class="child circle-3"></div> <div class="child circle-4"></div> <div class="child circle-5"></div> <div class="child circle-6"></div> <div class="child circle-7"></div> <div class="child circle-8"></div> <div class="child circle-9"></div> <div class="child circle-10"></div> <div class="child circle-11"></div> <div class="child circle-12"></div> </div> </section> <section> <div class="cube-grid"> <div class="cube cube-1"></div> <div class="cube cube-2"></div> <div class="cube cube-3"></div> <div class="cube cube-4"></div> <div class="cube cube-5"></div> <div class="cube cube-6"></div> <div class="cube cube-7"></div> <div class="cube cube-8"></div> <div class="cube cube-9"></div> </div> </section> <section> <div class="circle-opacity"> <div class="child circle-1"></div> <div class="child circle-2"></div> <div class="child circle-3"></div> <div class="child circle-4"></div> <div class="child circle-5"></div> <div class="child circle-6"></div> <div class="child circle-7"></div> <div class="child circle-8"></div> <div class="child circle-9"></div> <div class="child circle-10"></div> <div class="child circle-11"></div> <div class="child circle-12"></div> </div> </section> <section> <div class="folding-cube"> <div class="cube cube-1"></div> <div class="cube cube-2"></div> <div class="cube cube-4"></div> <div class="cube cube-3"></div> </div> </section>
2、css代码
/* reset css */
body {
margin:0;
background-color:#000;
}
html,body {
height:100%;
}
/* 1 */
body {
display:flex;
justify-content:space-around;
align-content:space-around;
flex-wrap:wrap;
}
section {
flex:1 1 25%;
}
.rotating-plane {
margin:auto;
width:64px;
height:64px;
background-color:pink;
animation:rotating-plane 1.2s infinite ease-in-out;
}
@keyframes rotating-plane {
0% {
transform:perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform:perspective(120px) rotateX(-180deg) rotateY(0deg);
}
100% {
transform:perspective(120px) rotateX(-180deg) rotateY(-180deg);
}
}/*2*/
.double-bounce {
position:relative;
margin:auto;
width:64px;
height:64px;
}
.double-bounce .child {
width:100%;
height:100%;
border-radius:50%;
background-color:pink;
opacity:.6;
position:absolute;
left:0;
top:0;
animation:double-bounce 2s infinite ease-in-out;
}
.double-bounce .double-bounce-2 {
animation-delay:-1s;
}
@keyframes double-bounce {
0% {
transform:scale(0);
}
50% {
transform:scale(1);
}
100% {
transform:scale(0);
}
}/*3*/
.wave {
width:96px;
height:64px;
margin:auto;
}
.wave .rect {
background-color:pink;
height:100%;
width:8px;
display:inline-block;
animation:wave-rect 1.2s infinite ease-in-out;
}
.wave .rect-1 {
animation-delay:-1.1s;
}
.wave .rect-2 {
animation-delay:-1s;
}
.wave .rect-3 {
animation-delay:-0.9s;
}
.wave .rect-4 {
animation-delay:-0.8s;
}
.wave .rect-5 {
animation-delay:-0.7s;
}
@keyframes wave-rect {
0% {
transform:scaleY(.4);
}
20% {
transform:scaleY(1);
}
40% {
transform:scaleY(.4);
}
100% {
transform:scaleY(.4);
}
}/*4*/
.cubes {
width:64px;
height:64px;
margin:auto;
position:relative;
}
.cubes .cube {
width:16px;
height:16px;
background-color:pink;
position:absolute;
left:0;
top:0;
animation:cubes 1.8s infinite ease-in-out;
}
.cubes .cube-2 {
animation-delay:-0.9s;
}
@keyframes cubes {
0% {
transform:rotate(0deg);
}
25% {
transform:translateX(32px) rotate(-90deg) scale(.5);
}
50% {
transform:translateX(32px) translateY(32px) rotate(-179deg);
}
50.1% {
transform:translateX(32px) translateY(32px) rotate(-180deg);
}
75% {
transform:translateX(0) translateY(32px) rotate(-270deg) scale(.5);
}
100% {
transform:rotate(-360deg);
}
}/*5*/
.spinner {
width:64px;
height:64px;
margin:auto;
background-color:pink;
border-radius:50%;
animation:spinner 1s infinite ease-in-out;
}
@keyframes spinner {
0% {
transform:scale(0);
}
100% {
transform:scale(1);
opacity:0;
}
}/*6*/
.dots {
width:64px;
height:64px;
margin:auto;
animation:dots 2s infinite linear;
}
@keyframes dots {
100% {
transform:rotate(360deg);
}
}.dots .child {
width:32px;
height:32px;
display:inline-block;
background-color:pink;
border-radius:50%;
animation:dots-child 2s infinite ease-in-out;
}
.dots .dot-2 {
animation-delay:-1s;
}
@keyframes dots-child {
0% {
transform:scale(0);
}
50% {
transform:scale(1);
}
100% {
transform:scale(0);
}
}/*7*/
.three-bounce {
width:128px;
margin:auto;
}
.three-bounce .child {
width:32px;
height:32px;
background-color:pink;
border-radius:50%;
display:inline-block;
animation:three-bounce 1.4s infinite ease-in-out;
}
.three-bounce .bounce-1 {
animation-delay:-0.32s;
}
.three-bounce .bounce-2 {
animation-delay:-0.16s;
}
@keyframes three-bounce {
0% {
transform:scale(0);
}
40% {
transform:scale(1);
}
80% {
transform:scale(0);
}
100% {
transform:scale(0);
}
}/*8*/
.circle-bounce {
width:64px;
height:64px;
margin:auto;
position:relative;
}
.circle-bounce .child {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.circle-bounce .child:before {
content:"";
display:block;
margin:0 auto;
width:15%;
height:15%;
background-color:pink;
border-radius:100%;
animation:circle-bounce 1.2s infinite ease-in-out;
}
.circle-bounce .circle-2 {
transform:rotate(30deg);
}
.circle-bounce .circle-2:before {
animation-delay:-1.1s;
}
.circle-bounce .circle-3 {
transform:rotate(60deg);
}
.circle-bounce .circle-3:before {
animation-delay:-1.0s;
}
.circle-bounce .circle-4 {
transform:rotate(90deg);
}
.circle-bounce .circle-4:before {
animation-delay:-0.9s;
}
.circle-bounce .circle-5 {
transform:rotate(120deg);
}
.circle-bounce .circle-5:before {
animation-delay:-0.8s;
}
.circle-bounce .circle-6 {
transform:rotate(150deg);
}
.circle-bounce .circle-6:before {
animation-delay:-0.7s;
}
.circle-bounce .circle-7 {
transform:rotate(180deg);
}
.circle-bounce .circle-7:before {
animation-delay:-0.6s;
}
.circle-bounce .circle-8 {
transform:rotate(210deg);
}
.circle-bounce .circle-8:before {
animation-delay:-0.5s;
}
.circle-bounce .circle-9 {
transform:rotate(240deg);
}
.circle-bounce .circle-9:before {
animation-delay:-0.4s;
}
.circle-bounce .circle-10 {
transform:rotate(270deg);
}
.circle-bounce .circle-10:before {
animation-delay:-0.3s;
}
.circle-bounce .circle-11 {
transform:rotate(300deg);
}
.circle-bounce .circle-11:before {
animation-delay:-0.2s;
}
.circle-bounce .circle-12 {
transform:rotate(330deg);
}
.circle-bounce .circle-12:before {
animation-delay:-0.1s;
}
@keyframes circle-bounce {
0% {
transform:scale(0);
}
40% {
transform:scale(1);
}
80% {
transform:scale(0);
}
100% {
transform:scale(0);
}
}/*9*/
.cube-grid {
width:64px;
height:64px;
margin:auto;
}
.cube-grid .cube {
width:33%;
height:33%;
background-color:pink;
float:left;
animation:cube-grid 1.3s infinite ease-in-out;
}
/*
234
123
012
*/
.cube-grid .cube-1 {
animation-delay:.2s;
}
.cube-grid .cube-2 {
animation-delay:.3s;
}
.cube-grid .cube-3 {
animation-delay:.4s;
}
.cube-grid .cube-4 {
animation-delay:.1s;
}
.cube-grid .cube-5 {
animation-delay:.2s;
}
.cube-grid .cube-6 {
animation-delay:.3s;
}
.cube-grid .cube-7 {
animation-delay:0s;
}
.cube-grid .cube-8 {
animation-delay:.1s;
}
.cube-grid .cube-9 {
animation-delay:.2s;
}
@keyframes cube-grid {
0% {
transform:scale3D(1,1,1);
}
35% {
transform:scale3D(0,0,1);
}
70% {
transform:scale3D(1,1,1);
}
100% {
transform:scale3D(1,1,1);
}
}/*8*/
.circle-opacity {
width:64px;
height:64px;
margin:auto;
position:relative;
}
.circle-opacity .child {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.circle-opacity .child:before {
content:"";
display:block;
margin:0 auto;
width:15%;
height:15%;
background-color:pink;
border-radius:100%;
animation:circle-opacity 1.2s infinite ease-in-out;
}
.circle-opacity .circle-2 {
transform:rotate(30deg);
}
.circle-opacity .circle-2:before {
animation-delay:-1.1s;
}
.circle-opacity .circle-3 {
transform:rotate(60deg);
}
.circle-opacity .circle-3:before {
animation-delay:-1.0s;
}
.circle-opacity .circle-4 {
transform:rotate(90deg);
}
.circle-opacity .circle-4:before {
animation-delay:-0.9s;
}
.circle-opacity .circle-5 {
transform:rotate(120deg);
}
.circle-opacity .circle-5:before {
animation-delay:-0.8s;
}
.circle-opacity .circle-6 {
transform:rotate(150deg);
}
.circle-opacity .circle-6:before {
animation-delay:-0.7s;
}
.circle-opacity .circle-7 {
transform:rotate(180deg);
}
.circle-opacity .circle-7:before {
animation-delay:-0.6s;
}
.circle-opacity .circle-8 {
transform:rotate(210deg);
}
.circle-opacity .circle-8:before {
animation-delay:-0.5s;
}
.circle-opacity .circle-9 {
transform:rotate(240deg);
}
.circle-opacity .circle-9:before {
animation-delay:-0.4s;
}
.circle-opacity .circle-10 {
transform:rotate(270deg);
}
.circle-opacity .circle-10:before {
animation-delay:-0.3s;
}
.circle-opacity .circle-11 {
transform:rotate(300deg);
}
.circle-opacity .circle-11:before {
animation-delay:-0.2s;
}
.circle-opacity .circle-12 {
transform:rotate(330deg);
}
.circle-opacity .circle-12:before {
animation-delay:-0.1s;
}
@keyframes circle-opacity {
0% {
opacity:0;
}
40% {
opacity:1;
}
80% {
opacity:0;
}
100% {
opacity:0;
}
}/*11*/
.folding-cube {
width:64px;
height:64px;
margin:auto;
transform:rotateZ(45deg);
}
.folding-cube .cube {
width:50%;
height:50%;
float:left;
position:relative;
}
.folding-cube .cube:before {
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:pink;
animation:folding-cube 2.4s infinite linear both;
transform-origin:100% 100%;
}
.folding-cube .cube-2 {
transform:rotateZ(90deg);
}
.folding-cube .cube-2:before {
animation-delay:.3s;
}
.folding-cube .cube-3 {
transform:rotateZ(180deg);
}
.folding-cube .cube-3:before {
animation-delay:.6s;
}
.folding-cube .cube-4 {
transform:rotateZ(270deg);
}
.folding-cube .cube-4:before {
animation-delay:.9s;
}
@keyframes folding-cube {
0% {
transform:perspective(140px) rotateX(-180deg);
opacity:0;
}
10% {
transform:perspective(140px) rotateX(-180deg);
opacity:0;
}
25% {
transform:perspective(140px) rotateX(0deg);
opacity:1;
}
75% {
transform:perspective(140px) rotateX(0deg);
opacity:1;
}
90% {
transform:perspective(140px) rotateY(180deg);
opacity:0;
}
100% {
transform:perspective(140px) rotateY(180deg);
opacity:0;
}
}运行效果如下：
