Ü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.“

2. Eine „Block-Verschwinden-Technik“ wird geladen

Was passiert, wenn jeder verschwindende Block integriert und unterschiedliche Verschwindungszeiten festgelegt werden?

<!-- 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

und vier Sensen hin und her schlagen?

<!-- 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>

Autor : Josh

5. Eine „Schallwelle“-Beladung

1-Element-Skalierung ist sehr einfach, was passiert mit den 15?

... ee Autor: El Alemaño

7. Ein „Unbesiegbarer Wind- und Feuerkreis“, beladen mit

4 Kreisen, kann tatsächlich eine relativ abstoßende Wirkung haben?

...

Autor: Richie 9. Eine „Kleber“-Beladung laden

Der geschickte Einsatz von Verschiebung kann auch den Effekt von Kollision und Extrusion erzeugen mit Switch sollte vertraut sein damit. Dies ist das Laden im Eshop

/* 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);
  }
}

rreeeAutor: Steve Meredith

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

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!