Beispielcode zur Realisierung des Ladeeffekts der B-Station mit CSS+SVG

Beispielcode zur Realisierung des Ladeeffekts der B-Station mit CSS+SVG

Schwierigkeit

Erstellung von zwei Masken für SVG-Grafiken

Erstens der Code

Dies ist der Inhalt der rosa Box links

Darüber gibt es nichts Gutes zu sagen.

<div id="mit">
    <div id="TA-con">
      <div id="text-con">
        <div id="linght"></div>
        <div id="TA">TA berechnen</div>
      </div>
    </div>
Körper {
      Rand: 0;
      Polsterung: 0;
      Hintergrundfarbe: #eee;
    }
    /* Setze den weißen Container */
    #con {
      Breite: 350px;
      Höhe: 85px;
      Hintergrundfarbe: #fff;
      Position: relativ;
      Rahmenradius: 4px;
      Rand: 50px automatisch;
    }
#TA-Kongress
      Breite: 157px;
      Höhe: 50px;
      Hintergrundfarbe: #f25d8e;
      Boxschatten: 0 4px 4px rgba (255, 112, 159, .3);
      Position: absolut;
      oben: 50 %;
      links: 5%;
      transformieren: verschiebeY(-50%);
      Rahmenradius: 4px;
      Cursor: Zeiger;
    }
    /* Den Text so setzen, dass er im Container zentriert ist */
    #text-con {
      Breite: 100px;
      Höhe: 100%;
      Rand: 0 automatisch;
      Position: relativ;
    }
    /* Mache einen kleinen Blitz */
    #leuchten {
      Breite: 0;
      Höhe: 0;
      Position: absolut;
      oben: 36 %;
      links: 4px;
      Rahmenfarbe: transparent;
      Rahmenstil: durchgezogen;
      Rahmenbreite: 10px;
      Rahmen oben: 10px durchgezogen #fff;
      Rahmenradius: 4px;
      transformieren: drehen (-55 Grad);
    }
    #linght::nach {
      Position: absolut;
      oben: -13px;
      links: -11px;
      Inhalt: "";
      Breite: 0;
      Höhe: 0;
      Rahmenfarbe: transparent;
      Rahmenstil: durchgezogen;
      Rahmenbreite: 10px;
      Rahmen oben: 10px durchgezogen #fff;
      transformieren: drehen (180 Grad);
      Rahmenradius: 4px;
    }
    /* Text*/
    #TA {
      schweben: rechts;
      Zeilenhöhe: 50px;
      Schriftgröße: 15px;
      Farbe: #fff;
    }
    #TA-con:hover {
      Hintergrundfarbe: #ff6b9a;
    }

Was wir hier tun, ist, eine SVG-Grafik mit grauem Hintergrund zu erstellen. Das sieht sehr viel und kompliziert aus. Keine Sorge, ich habe es nicht geschrieben.

 <div id="Rohr-con">
      <svg viewBox="0 0 1028 385" fill="keine" xmlns="http://www.w3.org/2000/svg">
        <Pfad d="M1 77H234.226L307.006 24H790" Strich="#e5e9ef" Strichbreite="20" />
        <Pfad d="M0 140H233.035L329.72 71H1028" Strich="#e5e9ef" Strichbreite="20" />
        <Pfad d="M1 255H234.226L307.006 307H790" Strich="#e5e9ef" Strichbreite="20" />
        <Pfad d="M0 305H233.035L329.72 375H1028" Strich="#e5e9ef" Strichbreite="20" />
        <rect y="186" width="236" height="24" fill="#e5e9ef" />
        <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef" />
        <Kreis r="14" transform="Matrix(1 0 0 -1 790 25)" fill="weiß" />
        <ellipse cx="790" cy="307,5" rx="25" ry="25,5" fill="#e5e9ef" />
        <Kreis r="14" transform="Matrix(1 0 0 -1 790 308)" fill="weiß" />
      </svg>

Ich habe dieses Ding verwendet, die Webversion ist online. Nach dem Zeichnen können Sie mit der rechten Maustaste klicken, um den Code zu kopieren. Es ist ganz einfach, nicht wahr! www.figma.com/

Nachdem die SVG-Zeichnung nun fertig ist, müssen wir darüber nachdenken, wie wir sie fertigstellen

Benötigte Dinge:
1: SVG-Bild mit grauer Hintergrundfarbe;
2: Ein rosa SVG-Bild. Wenn ich mit der Maus über das rosa Feld links fahre, wird das rosa SVG-Bild vollständig erweitert und der Anfangswert ist 0;
3: Ein kleines gelbes Quadrat, das sich schnell bewegt;

Der graue Hintergrund ist fertig, aber die rosa und gelben SVG-Bilder fehlen.

Maske wird verwendet, um eine rosa SVG-Maske zu erstellen

<div id="Maske">

Es gibt keinen Unterschied zum grauen SVG, ändern Sie einfach die Farbe

<svg viewBox="0 0 1028 385" fill="keine" xmlns="http://www.w3.org/2000/svg">
<Pfad d="M1 77H234.226L307.006 24H790" Strich="#f25d8e" Strichbreite="20" />
<Pfad d="M0 140H233.035L329.72 71H1028" Strich="#f25d8e" Strichbreite="20" />
<Pfad d="M1 255H234.226L307.006 307H790" Strich="#f25d8e" Strichbreite="20" />
<Pfad d="M0 305H233.035L329.72 375H1028" Strich="#f25d8e" Strichbreite="20" />
<rect y="186" width="236" height="24" fill="#f25d8e" />
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e" />
<Kreis r="14" transform="Matrix(1 0 0 -1 790 25)" fill="weiß" />
<ellipse cx="790" cy="307,5" rx="25" ry="25,5" fill="#f25d8e" />
<Kreis r="14" transform="Matrix(1 0 0 -1 790 308)" fill="weiß" />
</svg>
</div>

Mit der Orange-Maske wird eine Maske für gelbes SVG erstellt.

<div id="orange-maske" >

Es gibt keinen Unterschied zum grauen SVG, ändern Sie einfach die Farbe

<svg viewBox="0 0 1028 385" fill="keine" xmlns="http://www.w3.org/2000/svg">
<Pfad d="M1 77H234.226L307.006 24H790" Strich="#ffd52b" Strichbreite="20" />
<Pfad d="M0 140H233.035L329.72 71H1028" Strich="#ffd52b" Strichbreite="20" />
<Pfad d="M1 255H234.226L307.006 307H790" Strich="#ffd52b" Strichbreite="20" />
<Pfad d="M0 305H233.035L329.72 375H1028" Strich="#ffd52b" Strichbreite="20" />
<rect y="186" width="236" height="24" fill="#ffd52b" />
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b" />
<Kreis r="14" transform="Matrix(1 0 0 -1 790 25)" fill="weiß" />
<ellipse cx="790" cy="307,5" rx="25" ry="25,5" fill="#ffd52b" />
<Kreis r="14" transform="Matrix(1 0 0 -1 790 308)" fill="weiß" />
</svg>
</div>
<p id="people">Insgesamt <b>0</b> Personen</p>
</div>
</div>

CSS Code

/* Einen Grafikcontainer erstellen */
    #Röhren-Con {
      Breite: 157px;
      Höhe: 55px;
      Position: absolut;
      rechts: -5px;
      oben: 15px;
    }
    /* Breite und Höhe der SVG-Grafik festlegen*/
    svg {
      Breite: 100 %;
      Höhe: 100%;
    }
    /* Erstelle eine Maske mit der Breite 0. Wenn ich mit der Maus über das Ladefeld fahre, wird die Breite größer.*/
    #Maske {
      Breite: 0px;
      Höhe: 100%;
      Überlauf: versteckt;
      Position: absolut;
      oben: 0;
      links: 0;
      Übergang: alle 0,5 s;
    }
    /* Stellen Sie die Breite und Höhe des maskierten SBG separat ein, um sicherzustellen, dass Breite und Höhe einen festen Wert und keinen Prozentsatz haben*/
    #Maske svg {
      Breite: 157px;
      Höhe: 55px;
    }
    /* Starte die Animation, wenn du mit der Maus über den Laderahmen fährst und ziehe die rosa Linie auseinander*/
    #TA-con:hover+#tube-con>#Maske{
      Breite: 157px;
    }
    /* Starten Sie die Animation, wenn Sie über den Laderahmen schweben, und fügen Sie eine gelbe, sich schnell bewegende Animation hinzu*/
    #TA-con:hover+#tube-con>#orange-mask{
      Animation: Bewegung1 0,5 s linear 0,2 s unendlich;
    }
    #TA-con:hover+#tube-con>#orange-mask svg{
      Animation: Movetwo, 0,5 s linear, 0,2 s unendlich;
    }
    /* Eine gelbe bewegliche Maske erstellen */
    #orange-maske{
      Breite: 18px;
      Höhe: 100%;
      Überlauf: versteckt;
      Position: absolut;
      links: -15px;
      oben: 0px;
    }
    /* Gelben bewegten Inhalt erstellen */
    #orange-mask svg {
      Position: absolut;
      oben: 0;
      links: 15px;
      Breite: 157px;
      Höhe: 55px;
    }
    @keyframes verschieben1 {
      0 %{
        links: -15px;
      }
      100 %{
        links: 140px;
      }
    }
    @keyframes bewegenzwei {
      0 %{
        links: 15px;
      }
      100 %{
        links: -140px;
      }
    }
    #Menschen{
      Position: absolut;
      rechts: 10px;
      oben: 8px;
      Schriftgröße: 12px;
      Schriftfamilie: „YaHei“;
      Farbe: #aaa;
    }
    #Menschen>b{
      Farbe: #777;
    }

Der schwierigste Teil der CSS-Verarbeitung ist das gelbe SVG und die gelbe SVG-Maske.

Denn wir müssen sicherstellen, dass sich die gelbe SVG-Maske von links nach rechts bewegt und die Position des gelben SVG unverändert bleibt.
Die Maske ist das übergeordnete Element und das gelbe SVG ist das untergeordnete Element.
Nachdem das übergeordnete Element positioniert wurde, wird das untergeordnete Element bei der Bewegung des übergeordneten Elements mitbewegt.
Wenn das untergeordnete Element positioniert ist, das übergeordnete Element jedoch nicht, oder wenn das übergeordnete Element normal positioniert ist, wird das untergeordnete Element als fest positioniert.
Dies führt dazu, dass die Maske des übergeordneten Elements den überlaufenden Teil des untergeordneten Elements nicht verbirgt. Ich habe lange damit gekämpft! ! ! Dann wurde mir plötzlich klar, dass es egal ist, wie schnell oder weit sich das übergeordnete Element bewegt, solange sich das untergeordnete Element mit der gleichen Geschwindigkeit über die entgegengesetzte Distanz bewegt.
Es kann garantiert werden, dass die Kindelemente an der gleichen Position bleiben! ! ! Die untergeordneten Elemente sind relativ zum Hauptteil statisch! !

move1 ist die Maske des übergeordneten Elements, movetwo ist die gelbe SVG-Grafik. Bitte beschweren Sie sich nicht über die Namensgebung. . . .

Wie weit move1 sich bewegt, movetwo bewegt sich die entgegengesetzte Distanz

 @keyframes verschieben1 {
      0 %{
        links: -15px;
      }
      100 %{
        links: 140px;
      }
    }
    @keyframes bewegenzwei {
      0 %{
        links: 15px;
      }
      100 %{
        links: -140px;
      }
    }

Der gesamte Code

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
  <Stil>
    Körper {
      Rand: 0;
      Polsterung: 0;
      Hintergrundfarbe: #eee;
    }
    /* Setze den weißen Container */
    #con {
      Breite: 350px;
      Höhe: 85px;
      Hintergrundfarbe: #fff;
      Position: relativ;
      Rahmenradius: 4px;
      Rand: 50px automatisch;
    }
    /* Den Textinhaltscontainer festlegen */
    #TA-Kongress
      Breite: 157px;
      Höhe: 50px;
      Hintergrundfarbe: #f25d8e;
      Boxschatten: 0 4px 4px rgba (255, 112, 159, .3);
      Position: absolut;
      oben: 50 %;
      links: 5%;
      transformieren: verschiebeY(-50%);
      Rahmenradius: 4px;
      Cursor: Zeiger;
    }
    /* Den Text so setzen, dass er im Container zentriert ist */
    #text-con {
      Breite: 100px;
      Höhe: 100%;
      Rand: 0 automatisch;
      Position: relativ;
    }
    /* Mache einen kleinen Blitz */
    #leuchten {
      Breite: 0;
      Höhe: 0;
      Position: absolut;
      oben: 36 %;
      links: 4px;
      Rahmenfarbe: transparent;
      Rahmenstil: durchgezogen;
      Rahmenbreite: 10px;
      Rahmen oben: 10px durchgezogen #fff;
      Rahmenradius: 4px;
      transformieren: drehen (-55 Grad);
    }
    #linght::nach {
      Position: absolut;
      oben: -13px;
      links: -11px;
      Inhalt: "";
      Breite: 0;
      Höhe: 0;
      Rahmenfarbe: transparent;
      Rahmenstil: durchgezogen;
      Rahmenbreite: 10px;
      Rahmen oben: 10px durchgezogen #fff;
      transformieren: drehen (180 Grad);
      Rahmenradius: 4px;
    }
    /* Text*/
    #TA {
      schweben: rechts;
      Zeilenhöhe: 50px;
      Schriftgröße: 15px;
      Farbe: #fff;
    }
    #TA-con:hover {
      Hintergrundfarbe: #ff6b9a;
    }

    /* Einen Grafikcontainer erstellen */
    #Röhren-Con {
      Breite: 157px;
      Höhe: 55px;
      Position: absolut;
      rechts: -5px;
      oben: 15px;
    }
    /* Breite und Höhe der SVG-Grafik festlegen*/
    svg {
      Breite: 100 %;
      Höhe: 100%;
    }
    /* Erstelle eine Maske mit der Breite 0. Wenn ich mit der Maus über das Ladefeld fahre, wird die Breite größer.*/
    #Maske {
      Breite: 0px;
      Höhe: 100%;
      Überlauf: versteckt;
      Position: absolut;
      oben: 0;
      links: 0;
      Übergang: alle 0,5 s;
    }
    /* Stellen Sie die Breite und Höhe des maskierten SBG separat ein, um sicherzustellen, dass Breite und Höhe einen festen Wert und keinen Prozentsatz haben*/
    #Maske svg {
      Breite: 157px;
      Höhe: 55px;
    }
    /* Starte die Animation, wenn du mit der Maus über den Laderahmen fährst und ziehe die rosa Linie auseinander*/
    #TA-con:hover+#tube-con>#Maske{
      Breite: 157px;
    }
    /* Starten Sie die Animation, wenn Sie über den Laderahmen schweben, und fügen Sie eine gelbe, sich schnell bewegende Animation hinzu*/
    #TA-con:hover+#tube-con>#orange-mask{
      Animation: Bewegung1 0,5 s linear 0,2 s unendlich;
    }
    #TA-con:hover+#tube-con>#orange-mask svg{
      Animation: Movetwo, 0,5 s linear, 0,2 s unendlich;
    }
    /* Eine gelbe bewegliche Maske erstellen */
    #orange-maske{
      Breite: 18px;
      Höhe: 100%;
      Überlauf: versteckt;
      Position: absolut;
      links: -15px;
      oben: 0px;
    }
    /* Gelben bewegten Inhalt erstellen */
    #orange-mask svg {
      Position: absolut;
      oben: 0;
      links: 15px;
      Breite: 157px;
      Höhe: 55px;
    }
    @keyframes verschieben1 {
      0 %{
        links: -15px;
      }
      100 %{
        links: 140px;
      }
    }
    @keyframes bewegenzwei {
      0 %{
        links: 15px;
      }
      100 %{
        links: -140px;
      }
    }
    #Menschen{
      Position: absolut;
      rechts: 10px;
      oben: 8px;
      Schriftgröße: 12px;
      Schriftfamilie: „YaHei“;
      Farbe: #aaa;
    }
    #Menschen>b{
      Farbe: #777;
    }
  </Stil>
</Kopf>

<Text>
  <div id="mit">
    <div id="TA-con">
      <div id="text-con">
        <div id="linght"></div>
        <div id="TA">TA berechnen</div>
      </div>
    </div>
    <div id="Rohr-con">
      <svg viewBox="0 0 1028 385" fill="keine" xmlns="http://www.w3.org/2000/svg">
        <Pfad d="M1 77H234.226L307.006 24H790" Strich="#e5e9ef" Strichbreite="20" />
        <Pfad d="M0 140H233.035L329.72 71H1028" Strich="#e5e9ef" Strichbreite="20" />
        <Pfad d="M1 255H234.226L307.006 307H790" Strich="#e5e9ef" Strichbreite="20" />
        <Pfad d="M0 305H233.035L329.72 375H1028" Strich="#e5e9ef" Strichbreite="20" />
        <rect y="186" width="236" height="24" fill="#e5e9ef" />
        <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef" />
        <Kreis r="14" transform="Matrix(1 0 0 -1 790 25)" fill="weiß" />
        <ellipse cx="790" cy="307,5" rx="25" ry="25,5" fill="#e5e9ef" />
        <Kreis r="14" transform="Matrix(1 0 0 -1 790 308)" fill="weiß" />
      </svg>
      <div id="Maske">
        <svg viewBox="0 0 1028 385" fill="keine" xmlns="http://www.w3.org/2000/svg">
          <Pfad d="M1 77H234.226L307.006 24H790" Strich="#f25d8e" Strichbreite="20" />
          <Pfad d="M0 140H233.035L329.72 71H1028" Strich="#f25d8e" Strichbreite="20" />
          <Pfad d="M1 255H234.226L307.006 307H790" Strich="#f25d8e" Strichbreite="20" />
          <Pfad d="M0 305H233.035L329.72 375H1028" Strich="#f25d8e" Strichbreite="20" />
          <rect y="186" width="236" height="24" fill="#f25d8e" />
          <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e" />
          <Kreis r="14" transform="Matrix(1 0 0 -1 790 25)" fill="weiß" />
          <ellipse cx="790" cy="307,5" rx="25" ry="25,5" fill="#f25d8e" />
          <Kreis r="14" transform="Matrix(1 0 0 -1 790 308)" fill="weiß" />
        </svg>
      </div>
      <div id="orange-maske" >
        <svg viewBox="0 0 1028 385" fill="keine" xmlns="http://www.w3.org/2000/svg">
          <Pfad d="M1 77H234.226L307.006 24H790" Strich="#ffd52b" Strichbreite="20" />
          <Pfad d="M0 140H233.035L329.72 71H1028" Strich="#ffd52b" Strichbreite="20" />
          <Pfad d="M1 255H234.226L307.006 307H790" Strich="#ffd52b" Strichbreite="20" />
          <Pfad d="M0 305H233.035L329.72 375H1028" Strich="#ffd52b" Strichbreite="20" />
          <rect y="186" width="236" height="24" fill="#ffd52b" />
          <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b" />
          <Kreis r="14" transform="Matrix(1 0 0 -1 790 25)" fill="weiß" />
          <ellipse cx="790" cy="307,5" rx="25" ry="25,5" fill="#ffd52b" />
          <Kreis r="14" transform="Matrix(1 0 0 -1 790 308)" fill="weiß" />
        </svg>
      </div>
      <p id="people">Insgesamt <b>0</b> Personen</p>
    </div>
  </div>
</body>

</html>

Damit ist dieser Artikel über den Beispielcode zur Verwendung von CSS+SVG zum Erzielen des B-Station-Ladeeffekts abgeschlossen. Weitere relevante CSS-B-Station-Ladeinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass alle 123WORDPRESS.COM in Zukunft unterstützen werden!

<<:  Erste Schritte mit Nginx Reverse Proxy

>>:  So implementieren Sie Zeilenumbrüche im Texteingabebereich von Textarea

Artikel empfehlen

Bestimmte Vorgänge der geplanten MySQL-Löschung von Sicherungsdaten

1|0 Hintergrund Aufgrund von Projektanforderungen...

So zeigen Sie Webseiten in verschiedenen Auflösungen und Browsern richtig an

Die Schlüsselcodes lauten wie folgt: Code kopieren...

Verschönerung der Dualsystem-Boot-Schnittstelle für Win10 + Ubuntu20.04 LTS

Effektanzeige Die eingebaute Boot-Oberfläche ist ...

Grundlegendes Tutorial zur Bedienung von Dateien und Berechtigungen in CentOS

Vorwort Bevor wir beginnen, sollten wir uns kurz ...

MySQL implementiert Zeichenfolgenverkettung, Abfangen, Ersetzen und Positionssuchvorgänge

MySQL-Zeichenfolgenverkettung, -Abfangen, -Ersetz...

Beheben von Problemen mit impliziter MySQL-Konvertierung

1. Problembeschreibung root@mysqldb 22:12: [xucl]...

So ändern Sie den MySQL-Zeichensatz

1. Überprüfen Sie den Zeichensatz von MySQL Varia...

Schritte zum Verpacken und Bereitstellen des Vue-Projekts auf dem Apache-Server

In der Entwicklungsumgebung wird das Vue-Projekt ...

So löschen Sie node_modules und installieren es neu

Inhaltsverzeichnis Schritt 1: Installieren Sie no...

Erstellen eines Redis-Clusters auf Docker

Inhaltsverzeichnis 1. Ziehen Sie das Bild 2. Erst...

Informationen zur Verwendung und Vorsichtsmaßnahmen von Promises in Javascript (empfohlen)

1. Beschreibung des Versprechens Promise ist ein ...

Eine kurze Erläuterung, wie Tomcat den übergeordneten Delegationsmechanismus unterbricht

Inhaltsverzeichnis JVM-Klassenlader Tomcat-Klasse...

50 superpraktische Tools für Webdesigner

Webdesigner zu sein ist nicht einfach. Sie müssen...

Der Effekt eines dynamischen CSS-Farbverlaufsrahmens, der um den Inhaltsbereich rotiert (Beispielcode)

Rendern Nachdem ich online nach relevanten Inform...

Durchführung der lokalen Migration von Docker-Images

Ich habe vor Kurzem Docker gelernt und stoße dabe...