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

Detaillierte Erklärung zur Verwendung der Click-to-Switch-Bildkomponente im Vue-Kartenstil

In diesem Artikel wird die Click-to-Switch-Bildko...

CentOS 8 offiziell veröffentlicht, basierend auf Red Hat Enterprise Linux 8

Das CentOS-Projekt, ein 100 % kompatibler Neuaufb...

Detaillierte Erläuterung der Vorteile von PNG in verschiedenen Netzwerkbildformaten

BMP ist ein von Hardwaregeräten unabhängiges und ...

Analyse von Multithread-Programmierbeispielen unter Linux

1 Einleitung Die Thread-Technologie wurde bereits...

LayUI+Shiro implementiert ein dynamisches Menü und erinnert sich an das Beispiel der Menüerweiterung

Inhaltsverzeichnis 1. Maven-Abhängigkeit 2. Menüb...

25 Beispiele für Website-Design im Nachrichtenstil

bmi Voyager Heugabel Ulster Lebensmittelhändler F...

Vorgehensweise, wenn die Online-MySQL-Auto-Increment-ID erschöpft ist

Inhaltsverzeichnis Tabellendefinition - automatis...

Detaillierte Erläuterung der Mysql-Funktionsaufrufoptimierung

Inhaltsverzeichnis Funktionsaufrufoptimierung Fun...

Fehlerbehebung bei den von Alibaba Cloud hinzugefügten Sicherheitsgruppen-Ports und der Unfähigkeit, nach dem Hinzufügen auf sie zuzugreifen

Zweck: 1. Um das externe Netzwerk des Servers übe...

So handhaben Sie Bilder in Vue-Formularen

Frage: Ich habe in Vue ein Formular zum Hochladen...

Einige Frontend-Grundlagen (HTML, CSS) aus der Praxis

1. Die Div-CSS-Maushandform ist Cursor:Zeiger; 2. ...

Das Problem der Einführung der angegebenen Schriftart @font-face in CSS, um mit verschiedenen Browsern kompatibel zu sein

Wenn Sie beim Erstellen einer Webseite eine besti...

So sperren Sie eine virtuelle Konsolensitzung unter Linux

Wenn Sie an einem gemeinsam genutzten System arbe...

Verwenden Sie HTML und CSS, um Ihren eigenen warmen Mann „Dabai“ zu erstellen.

Das Endergebnis sieht so aus, ist es nicht süß … ...

Teilen Sie 13 grundlegende Syntax von Typescript

Inhaltsverzeichnis 1. Was ist Ts 2. Grundlegende ...