作者:胖胖我有点烦
链接:https://blog.csdn.net/JiangLittleBai/article/details/109000535
loading效果1
效果图
html
<h1>loading效果</h1>
<div class="loading1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS
.loading1 {
margin: 20px;
display: inline-flex;
align-items: center;
height: 50px;
}
.loading1 span {
display: inline-block;
width: 6px;
height: 30px;
border-radius: 3px;
margin:0 3px;
background-color: lightgreen;
animation: loading11 1s ease 0s infinite;
}
.loading1 span:nth-child(2){
animation-delay: 0.2s;
}
.loading1 span:nth-child(3){
animation-delay: 0.4s;
}
.loading1 span:nth-child(4){
animation-delay: 0.6s;
}
.loading1 span:nth-child(5){
animation-delay: 0.8s;
}
@keyframes loading11 {
0%,
100% {
height: 30px;
background-color: lightgreen;
}
50% {
height: 50px;
background-color: lightskyblue;
}
}
loading效果2
效果图
html
<div class="loading2">
<div class="circle"></div>
</div>
CSS
.loading2 {
width: 180px;
height: 6px;
border-radius: 3px;
background-color: lightskyblue;
position: relative;
}
.loading2 .circle {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-block;
background-color: lightseagreen;
position: absolute;
top: -5px;
left:0;
animation: loading22 3s linear 0s infinite;
}
@keyframes loading22 {
0%,
100% {
left: 0;
}
50% {
left: 164px;
}
}
loading效果3
效果图
html
<div class="loading3">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS
.loading3{
width: 100px;
height: 30px;
}
.loading3 span{
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: lightskyblue;
animation: loading33 2s linear 0s infinite;
}
@keyframes loading33{
0%,100%{
opacity: 0;
}
50%{
opacity: 1;
}
}
.loading3 span:nth-child(2){
animation-delay: 0.3s;
}
.loading3 span:nth-child(3){
animation-delay: 0.6s;
}
.loading3 span:nth-child(4){
animation-delay: 0.9s;
}
.loading3 span:nth-child(5){
animation-delay: 1.2s;
}
loading效果4
效果图
html
<div class="loading4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS
.loading4{
width: 120px;
height: 20px;
position: relative;
}
.loading4 span{
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: lightpink;
animation: loading44 2s ease 0s infinite ;
}
@keyframes loading44{
0%,100%{
left:0;
opacity: 1;
}
50%{
left:100px;
opacity: 0;
}
}
.loading4 span:nth-child(2){
left:12px;
animation-delay: 0.2s;
}
.loading4 span:nth-child(3){
left:24px;
animation-delay: 0.3s;
}
.loading4 span:nth-child(4){
left:36px;
animation-delay: 0.4s;
}
.loading4 span:nth-child(5){
left:48px;
animation-delay: 0.5s;
}
loading效果5
效果图
html
<div class="loading5">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS
.loading5{
width: 100px;
height: 20px;
}
.loading5 span{
display: inline-block;
width: 12px;
height: 12px;
background-color: lightsalmon;
transform: rotate(90deg);
animation: loading55 1s ease 0s infinite ;
transform-origin: right;
}
@keyframes loading55{
0%{
opacity: 1;
transform: rotate(0deg);
}
100%{
opacity: 0;
transform: rotate(90deg);
}
}
.loading5 span:nth-child(2){
animation-delay: 0.2s;
}
.loading5 span:nth-child(3){
animation-delay: 0.4s;
}
.loading5 span:nth-child(4){
animation-delay: 0.6s;
}
.loading5 span:nth-child(5){
animation-delay: 0.8s;
}
loading效果6
效果图
html
<div class="loading6">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS
.loading6 {
width: 150px;
height: 150px;
position: relative;
animation: loading66 5s linear 0s infinite;
transform-origin: center;
}
.loading6 span {
width: 12px;
height: 12px;
display: inline-block;
background-color: lightsalmon;
border-radius: 50%;
transform-origin: 0px 50px;
position: absolute;
left:72px;
top: 24px;
animation: loading666 2s linear 0s infinite;
}
@keyframes loading66{
0%{
transform: rotate(0deg);
}
50%{
transform:rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes loading666{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
.loading6 span:nth-child(1) {
transform: rotate(0deg);
animation-delay: 0.1s;
}
.loading6 span:nth-child(2) {
transform: rotate(45deg);
animation-delay: 0.2s;
}
.loading6 span:nth-child(3) {
transform: rotate(90deg);
animation-delay: 0.3s;
}
.loading6 span:nth-child(4) {
transform: rotate(135deg);
animation-delay: 0.4s;
}
.loading6 span:nth-child(5) {
transform: rotate(180deg);
animation-delay: 0.5s;
}
.loading6 span:nth-child(6) {
transform: rotate(225deg);
animation-delay: 0.6s;
}
.loading6 span:nth-child(7) {
transform: rotate(270deg);
animation-delay: 0.7s;
}
.loading6 span:nth-child(8) {
transform: rotate(315deg);
animation-delay: 0.8s;
}