<h1>纯CSS，不一样的加载动画</h1>
<div class="sep"></div>
<div class="container">
<div class="loader loader1"></div>
<div class="loader loader2"></div>
<div class="loader loader3"></div>
<div class="loader loader4"></div>
<div class="loader loader5"></div>
<div class="loader loader6"></div>
<div class="loader loader7"></div>
<div class="loader loader8"></div>
<div class="loader loader9"></div>
<div class="loader loader10"></div>
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
CSS
格式化
body{
background:black;
color:white;
display:flex;
flex-direction:column;
align-items:center;
}
@keyframes glow{
50%{
border-color:lime;
width:95%;
box-shadow:0px 0px 10px -2px green;
}
100%{
border-color:green;
width:35%;
box-shadow:0px 0px 10px -2px green;
}
}
.sep{
width:35%;
border-bottom:2px solid green;
margin-bottom:20px;
animation:glow 8s infinite;
}
.container{
display:flex;
align-items:center;
justify-content:center;
background:black;
/* width:75%; */
/* padding:30px; */
flex-wrap:wrap;
}
.loader{
width:100px;
height:100px;
display:flex;
justify-content:center;
align-items:center;
margin:10px 20px;
}
@keyframes load{
50%{
transform:rotatez(180deg) scale(0.2);
border-color:orange;
}
100%{
transform:rotatez(360deg) scale(1.1);
}
}
.loader1::before{
content:"";
color:white;
height:30px;
width:30px;
background:transparent;
border-radius:45%;
border:25px dotted lime;
animation:load 1s infinite ease-in-out;
}
@keyframes load2{
50%{
transform:rotatez(180deg);
border-radius:55%;
}
100%{
transform:rotatez(360deg);
}
}
.loader2::before{
content:"";
color:white;
height:30px;
width:30px;
background:transparent;
border-radius:10%;
border:25px inset orange;
animation:load2 1s infinite ease-in-out;
}
@keyframes load3{
50%{
transform:rotatez(180deg) scale(1.5);
border-style:dotted;
}
100%{
transform:rotatez(360deg) scale(0.9);
}
}
.loader3::before{
content:"";
color:white;
height:30px;
width:30px;
background:transparent;
border-radius:50%;
border:15px solid blue;
border-color:#1565C0 #26C6DA;
animation:load3 2s infinite;
}
@keyframes load4{
50%{
transform:rotatez(180deg);
border-width:30px;
}
100%{
transform:rotatez(360deg);
}
}
.loader4::before{
content:"";
color:white;
height:30px;
width:30px;
background:transparent;
border-radius:50%;
border:15px ridge lime;
border-color:lime transparent;
animation:load4 1s infinite;
}
@keyframes load5{
40%{
transform:rotatez(-180deg);
border-width:16px;
}
80%{
transform:rotatez(-360deg);
}
100%{
transform:rotatez(-360deg);
}
}
.loader5::before{
content:"";
color:white;
height:50px;
width:50px;
background:transparent;
border-radius:50%;
border:10px dotted lime;
border-left-color:transparent;
animation:load5 1s infinite ease-in-out;
}
@keyframes load6{
50%{
transform:rotatez(180deg);
border-width:40px;
}
100%{
transform:rotatez(360deg);
}
}
.loader6::before{
content:"";
color:white;
height:0px;
width:0px;
background:transparent;
border-radius:50%;
border:35px ridge red;
border-color:indigo lime yellow orangered;
animation:load6 .5s infinite;
}
@keyframes load7{
100%{
transform:rotatez(360deg);
}
}
.loader7::before{
content:"";
color:white;
height:50px;
width:50px;
background:transparent;
border-radius:50%;
border:10px solid blue;
border-color:#0277BD #0277BD #0277BD #81D4FA;
animation:load7 .6s infinite ease-in-out;
box-shadow:0px 0px 40px -2px skyblue;
}
@keyframes load8{
100%{
transform:rotatez(360deg);
}
}
.loader8::before{
content:"";
color:white;
height:50px;
width:50px;
background:transparent;
border-radius:50%;
border:10px solid transparent;
border-color:#039BE5 #039BE5 transparent transparent;
animation:load8 .6s infinite;
}
@keyframes load9{
50%{
transform:rotatez(180deg) scale(0.6);
}
100%{
transform:rotatez(360deg) scale(1);
}
}
.loader9::before{
content:"";
color:white;
height:50px;
width:50px;
background:transparent;
border-radius:50%;
border:20px dashed transparent;
border-color:#039BE5 indianred;
animation:load9 .6s infinite ease-in-out;
}
@keyframes load10{
50%{
transform:rotatez(180deg);
border-style:dashed;
border-color:red maroon indianred orangered;
}
100%{
transform:rotatez(360deg);
}
}
.loader10::before{
content:"";
color:white;
height:50px;
width:50px;
background:transparent;
border-radius:50%;
border:20px solid red;
animation:load10 1s infinite;
}
JS
格式化