Heim >Web-Frontend >CSS-Tutorial >Über 10 CSS-Ladeeffekte, die Ihr Projekt zum Strahlen bringen, kommen Sie und holen Sie sie sich! !

Über 10 CSS-Ladeeffekte, die Ihr Projekt zum Strahlen bringen, kommen Sie und holen Sie sie sich! !

青灯夜游
青灯夜游nach vorne
2021-10-19 11:27:404333Durchsuche

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

Über 10 CSS-Ladeeffekte, die Ihr Projekt zum Strahlen bringen, kommen Sie und holen Sie sie sich! !

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: &#39;&#39;;
  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: &#39;&#39;;
  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);
  }
}

Über 10 CSS-Ladeeffekte, die Ihr Projekt zum Strahlen bringen, kommen Sie und holen Sie sie sich! !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);
  }
}

Über 10 CSS-Ladeeffekte, die Ihr Projekt zum Strahlen bringen, kommen Sie und holen Sie sie sich! !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? Über 10 CSS-Ladeeffekte, die Ihr Projekt zum Strahlen bringen, kommen Sie und holen Sie sie sich! !

... ee Autor: El Alemaño

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

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

Über 10 CSS-Ladeeffekte, die Ihr Projekt zum Strahlen bringen, kommen Sie und holen Sie sie sich! !...

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);
  }
}
rreee

Autor: Steve Meredith

Über 10 CSS-Ladeeffekte, die Ihr Projekt zum Strahlen bringen, kommen Sie und holen Sie sie sich! !

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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen