Heim > Artikel > Web-Frontend > Über 10 CSS-Ladeeffekte, die Ihr Projekt zum Strahlen bringen, kommen Sie und holen Sie sie sich! !
Dieser Artikel stellt Ihnen mehr als 10 Ladeeffekte vor, die Ihr Projekt garantiert zum Glänzen bringen. Ich hoffe, er wird für alle hilfreich sein. Kommen Sie und holen Sie ihn ab! !
Ich glaube, dass jeder oft Ladeanimationen verwendet, aber der Ladestil der meisten Komponentenbibliotheken ist zu einfach.
Dieses Mal habe ich über 10 hochwertige Ladeanimationseffekte für die Front-End-Mitarbeiter gesammelt! ! Kopieren Sie es einfach und verwenden Sie es direkt! ! „Lassen Sie es uns zeigen.“
<!-- loading.html --> <div class="boxLoading"></div>
/* loading.css */ .boxLoading { width: 50px; height: 50px; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .boxLoading:before { content: ''; width: 50px; height: 5px; background: #fff; opacity: 0.7; position: absolute; top: 59px; left: 0; border-radius: 50%; animation: shadow .5s linear infinite; } .boxLoading:after { content: ''; width: 50px; height: 50px; background: #e04960; animation: animate .5s linear infinite; position: absolute; top: 0; left: 0; border-radius: 3px; } @keyframes animate { 17% { border-bottom-right-radius: 3px; } 25% { transform: translateY(9px) rotate(22.5deg); } 50% { transform: translateY(18px) scale(1, .9) rotate(45deg); border-bottom-right-radius: 40px; } 75% { transform: translateY(9px) rotate(67.5deg); } 100% { transform: translateY(0) rotate(90deg); } } @keyframes shadow { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.2, 1); } }
Autor: Nicola Pressi
3. Was passiert, wenn eine „Invincible Wind and Fire Scythe“ geladen ist
<!-- loading.html --> <div class="sk-cube-grid"> <div class="sk-cube sk-cube-1"></div> <div class="sk-cube sk-cube-2"></div> <div class="sk-cube sk-cube-3"></div> <div class="sk-cube sk-cube-4"></div> <div class="sk-cube sk-cube-5"></div> <div class="sk-cube sk-cube-6"></div> <div class="sk-cube sk-cube-7"></div> <div class="sk-cube sk-cube-8"></div> <div class="sk-cube sk-cube-9"></div> </div>
/* loading.css */ .sk-cube-grid { width: 4em; height: 4em; margin: auto; } .sk-cube { width: 33%; height: 33%; background-color: #e04960; float: left; animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out; } .sk-cube-1 { animation-delay: 0.2s; } .sk-cube-2 { animation-delay: 0.3s; } .sk-cube-3 { animation-delay: 0.4s; } .sk-cube-4 { animation-delay: 0.1s; } .sk-cube-5 { animation-delay: 0.2s; } .sk-cube-6 { animation-delay: 0.3s; } .sk-cube-7 { animation-delay: 0s; } .sk-cube-8 { animation-delay: 0.1s; } .sk-cube-9 { animation-delay: 0.2s; } @keyframes sk-cube-grid-scale-delay { 0%, 70%, 100% { transform: scale3D(1,1,1); } 35% { transform: scale3D(0,0,1); } }
Autor: Martin van Driel
4. Durch eine einfache quadratische Drehung und interne Höhensteuerung kann der Fülleffekt erzielt werden e
<!-- loading.html --> <div class="spinner"> <div class="outer"> <div class="inner tl"></div> <div class="inner tr"></div> <div class="inner br"></div> <div class="inner bl"></div> </div> </div>
5. Eine „Schallwelle“-Beladung
1-Element-Skalierung ist sehr einfach, was passiert mit den 15?
... ee Autor: El Alemaño
4 Kreisen, kann tatsächlich eine relativ abstoßende Wirkung haben?
...
Autor: Richie 9. Eine „Kleber“-Beladung laden
/* loading.css */
.spinner {
position: absolute;
width: 128px;
height: 128px;
top: calc(50% - 64px);
left: calc(50% - 64px);
transform: perspective(206px) rotateX(45deg);
}
.outer {
box-sizing: border-box;
animation: spin 3s linear infinite;
height: 100%;
}
.inner {
position: absolute;
border-radius: 50%;
width: 64px;
height: 64px;
animation: spin 1.8s ease-in-out infinite;
}
.inner.tl {
top: 0;
left: 0;
border-top: 2px solid #531430;
border-left: 4px solid #531430;
}
.inner.tr {
top: 0;
right: 0;
border-top: 2px solid #e04960;
border-right: 4px solid #e04960;
}
.inner.br {
bottom: 0;
right: 0;
border-bottom: 2px solid #531430;
border-right: 4px solid #531430;
}
.inner.bl {
bottom: 0;
left: 0;
border-bottom: 2px solid #e04960;
border-left: 4px solid #e04960;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
rreee
Einführung in die Programmierung! !
Das obige ist der detaillierte Inhalt vonÜber 10 CSS-Ladeeffekte, die Ihr Projekt zum Strahlen bringen, kommen Sie und holen Sie sie sich! !. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!