Implementierung des CSS-Quellcodes für herzförmige Ladeanimationen

Lassen Sie mich Ihnen ohne weitere Umschweife den Code zeigen. Der Code ist sehr einfach und Sie werden ihn verstehen, nachdem Sie ihn studiert haben. Wenn Sie Fragen haben, können Sie sie mir stellen.

<!DOCTYPE html>
<html>
  <Kopf>
    <meta charset="utf-8">
    <Titel></Titel>
    <style type="text/css">
      .Herz-Laden {
        Rand oben: 120px;
        Breite: 200px;
        Höhe: 200px;
      }

      ul {
        Listenstil: keiner;
        Anzeige: Flex;
        Inhalt ausrichten: Abstand dazwischen;
        Breite: 150px;
        Höhe: 10px;
        /* Die Idee, Herzform und Streifenform zu erstellen, ist dieselbe, aber die Höhe jedes Streifens ist unterschiedlich*/
      }
      li {
        --Anzahl: 9;
        --rgb: Berechnung(var(--index) / var(--count) * .5Umdrehungen);
        /* Stellen Sie die Verzögerung nicht zu langsam ein. Wenn sie zu langsam ist, ist die Herzform nicht sichtbar. Passen Sie die Verzögerung und die Dauer der Animation gleichzeitig an*/
        --Zeit: berechnet((var(--index) - 1) * 150ms);
        Rahmenradius: 5px;
        Breite: 10px;
        Höhe: 10px;
        Hintergrundfarbe: #003BB3;
        /* Durch die Verwendung der Fiter-Funktion kann der Farbverlauf sehr schön gestaltet werden*/
        Filter: Farbton-Rotation (var(--rgb));
        /* Nachfolgend sehen Sie die Dauer der Animation*/
        Animationsdauer: 2,5 s;
        Animationsverzögerung: var(--time);
        Anzahl der Animationsiterationen: unendlich;
      }
      .Zeile-1,
      .Zeile-9 {
        Animationsname: Linienbewegung-1;
      }
      .Zeile-2,
      .Zeile-8 {
        Animationsname: Linienbewegung 2;
      }
      .Zeile-3,
      .Zeile-7 {
        Animationsname: Linienbewegung 3;
      }
      .Zeile-4,
      .Zeile-6 {
        Animationsname: Linienbewegung 4;
      }
      .Zeile-5 {
        Animationsname: Linienbewegung 5;
      }
      /* Symmetrische Animationen sollten auf gleicher Höhe sein, damit die Herzform sichtbar ist*/
      @keyframes Zeilenverschiebung-1 {

        0%,
        10 %,
        90%,
        100 % {
          Höhe: 10px;
        }

        45 %,
        55 % {
          Höhe: 30px;
          transformieren: übersetzen3d(0, -15px, 0);
        }
      }

      @keyframes Zeilenverschiebung-2 {

        0%,
        10 %,
        90%,
        100 % {
          Höhe: 10px;
        }

        45 %,
        55 % {
          Höhe: 60px;
          transformieren: übersetzen3d(0, -30px, 0);
        }
      }

      @keyframes Zeilenverschiebung-3 {

        0%,
        10 %,
        90%,
        100 % {
          Höhe: 10px;
        }

        45 %,
        55 % {
          Höhe: 80px;
          transformieren: übersetzen3d(0, -40px, 0);
        }
      }

      @keyframes Zeilenverschiebung-4 {

        0%,
        10 %,
        90%,
        100 % {
          Höhe: 10px;
        }

        45 %,
        55 % {
          Höhe: 90px;
          transformieren: übersetzen3d(0, -30px, 0);
        }
      }

      @keyframes Zeilenverschiebung-5 {

        0%,
        10 %,
        90%,
        100 % {
          Höhe: 10px;
        }

        45 %,
        55 % {
          Höhe: 90px;
          transformieren: übersetzen3d(0, -20px, 0);
        }
      }
    </Stil>
  </Kopf>
  <Text>
    <div Klasse="Herz-Laden">
      <ul>
        <li class="line-1" style="--index: 1"></li>
        <li class="line-2" style="--index: 2"></li>
        <li class="line-3" style="--index: 3"></li>
        <li class="line-4" style="--index: 4"></li>
        <li class="line-5" style="--index: 5"></li>
        <li class="line-6" style="--index: 6"></li>
        <li class="line-7" style="--index: 7"></li>
        <li class="line-8" style="--index: 8"></li>
        <li class="line-9" style="--index: 9"></li>
      </ul>
    </div>
  </body>
</html>

Dies ist das Ende dieses Artikels über die Implementierung des CSS-Quellcodes für herzförmige Ladeanimationen. Weitere verwandte Inhalte zu herzförmigen Ladeanimationen in CSS finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Eine einfache Möglichkeit, Desktop-Exe-Programme auf einer Webseite aufzurufen

>>: Eine Analyse von Div+Float, einem sehr wichtigen Konzept im Website-Design

Eine vollständige Anleitung zum Löschen von Floats in CSS (Zusammenfassung)

Implementierung des CSS-Quellcodes für herzförmige Ladeanimationen

Eine vollständige Anleitung zum Löschen von Floats in CSS (Zusammenfassung)

Analyse der Protokolldateien im Tomcat-Protokollverzeichnis (Zusammenfassung)

Detaillierte Erklärung der MySQL-Binlog-Verwendung

So verbessern Sie die Sicherheit von Linux- und Unix-Servern

So erstellen Sie Benutzer und verwalten Berechtigungen in MySQL

Implementierung des CSS-Quellcodes für herzförmige Ladeanimationen

Zusammenfassung der XHTML-Anwendung im Webdesign-Studium

So verwenden Sie den CocosCreator-Objektpool

Zusammenfassung der Wissenspunkte des Datenbankindex

Detaillierte Erklärung der JavaScript-Timer- und Button-Effekt-Einstellungen

Artikel empfehlen

Detailliertes Tutorial zum Bereitstellen von Springboot oder Nginx mit Kubernetes

Lösen Sie schnell das Problem des langsamen Starts nach der Tomcat-Neukonfiguration

Eine kurze Erklärung zum sinnvollen Einsatz von Tabellen und Divs im Seitendesign

Teilen Sie die 15 besten HTML/CSS-Design- und Entwicklungsframeworks

Windows Server 2016 – Kurzanleitung zur Bereitstellung von Remotedesktopdiensten

Vue realisiert den Logistik-Timeline-Effekt

JS implementiert Anforderungsdispatcher

Verschiedene Möglichkeiten zum Ändern der Hintergrundbildfarbe mit CSS3

Natives js imitiert die Pulldown-Aktualisierung eines Mobiltelefons

So aktivieren Sie TLS- und CA-Authentifizierung in Docker

HTML-Tabellen-Tag-Tutorial (17): Tabellentitel vertikales Ausrichtungsattribut VALIGN

Beispiel für die Konfiguration mehrerer SSL-Zertifikate für eine einzelne Nginx-IP-Adresse

So erstellen Sie einen Flammeneffekt mit CSS

Eine kurze Erläuterung der $notify-Punkte des Elements

Detailliertes Installationstutorial für Mysql5.7.19 unter Centos7