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

Implementieren eines binären Suchbaums in JavaScript

Die Implementierung des Suchbinärbaums in JavaScr...

So stellen Sie den Node.js-Dienst mithilfe von Dockerfile bereit

Dockerfile initialisieren Angenommen, unser Proje...

Detaillierte Erklärung des JS-Browser-Ereignismodells

Inhaltsverzeichnis Was ist ein Ereignis Ein einfa...

Auswahl und Überlegungen zur MySQL-Datensicherungsmethode

Inhaltsverzeichnis 1. rsync, cp Dateien kopieren ...

Analyse der Verschachtelungsregeln von XHTML-Tags

In der XHTML-Sprache wissen wir alle, dass das ul...

Zusammenfassung von 6 Lösungen zur Implementierung des Singleton-Modus in JS

Vorwort Heute habe ich das Erzeugungsmuster im En...

Detaillierte Erklärung zur korrekten Öffnung in CSS

Warum sagen wir „normalerweise 1em=16px“? Die vom...

Beispiele für einige Verwendungstipps für META-Tags in HTML

HTML-Meta-Tag HTML-Meta-Tags können verwendet wer...

SQL-basierte Abfrageanweisungen

Inhaltsverzeichnis 1. Einfache SELECT-Anweisung 1...

Detaillierte Erklärung zur Konfiguration einer statischen IP in Centos8

Nach der Installation von CentOS 8 wird beim Neus...

9 praktische CSS-Eigenschaften, die Web-Frontend-Entwickler kennen müssen

1. Abgerundete Ecken Heutige Webdesigns halten stä...

Detaillierte Zusammenfassung der MySQL-SQL-Anweisungen zum Erstellen von Tabellen

MySQL-SQL-Anweisung zum Erstellen einer Tabelle A...

Alibaba Cloud beantragt ein kostenloses SSL-Zertifikat (https) von Cloud Shield

Da das Projekt den https-Dienst nutzen muss, habe...

Der CSS-Stil löst das Problem der Anzeige von Auslassungspunkten, wenn der Text zu lang ist

1. Der CSS-Stil löst das Problem der Anzeige von ...

Lösen Sie das Problem beim Einrichten des chinesischen Sprachpakets für den Docker-Container

Wenn Sie Docker verwenden, suchen Sie in Docker n...