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

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

青灯夜游

Freigeben： 2021-11-24 09:34:17

nach vorne

4299 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!