HTML+CSS zum Erreichen eines Surround-Reflexionsladeeffekts

HTML+CSS zum Erreichen eines Surround-Reflexionsladeeffekts

In diesem Artikel wird hauptsächlich die Implementierung von Surround-Reflexionsladeeffekten mithilfe von HTML+CSS wie folgt vorgestellt:

Schauen Sie sich zunächst die Wirkung an (vollständiger Code unten):

Bildbeschreibung hier einfügen

Umsetzung (Sie können Schritt für Schritt schreiben und dabei die Wirkung beobachten):

※ Zuerst initialisieren (direkte Kopie):

 *{
            Rand: 0;
            Polsterung: 0;
            Box-Größe: Rahmenbox;
        }
 Körper{
            Höhe: 100vh;
            Anzeige: Flex;
            Inhalt ausrichten: zentriert;
            Elemente ausrichten: zentrieren;
            Hintergrundfarbe: rgb(7, 15, 26);
        }

Flexibles Layout, untergeordnete Elemente zentriert ausrichten.

1. Tags definieren:

<div Klasse="Container">
        <span>Wird geladen...</span>
        <div Klasse="Kreis">
            <div Klasse="Ring"></div>
        </div>
    </div>

.container ist die Box der untersten Ebene.
Spanne ist Text.
.circle ist das untere Kreisfeld.
.ring ist der blaue Ring.

2. CSS-Stil des Containers:

.Container{
            Position: relativ;
            Höhe: 150px;
            Breite: 250px;
            -webkit-box-reflect: unter 1px linearer Farbverlauf (transparent, RGB (7, 15, 26));
        }

-webkit-box-reflect: Mit dieser Eigenschaft können Reflexionseffekte erzielt werden. detailliert.

3. Der CSS-Stil von .circle, der Animationsteil kann vorübergehend auskommentiert werden:

.Kreis{
            Position: relativ;
            Rand: 0 automatisch;
            Höhe: 150px;
            Breite: 150px;
            Hintergrundfarbe: rgb(13, 10, 37);
            Randradius: 50 %;
            Animation: Zhuan 2s linear unendlich;
        }
        @keyframes zhuan{
            0 %{ 
               
                transformieren: drehen (0 Grad);
            }
            100 %{
                
                 transformieren: drehen (360 Grad);
            }
        }

Rand: 0 automatisch; zentriert.
Randradius: 50 %; Winkelradius.
Animation: Zhuan 2 s linear unendlich; Stellen Sie die Animation so ein, dass sie rotiert.
transformieren: drehen(…Grad); Drehwinkel.

4. Definieren Sie eine doppelte Pseudoklasse, die ein kleiner Kreis mit der gleichen Farbe wie der Hintergrund ist und .circle abdeckt:

.circle::nach{
            Inhalt: '';
            Position: absolut;
            oben: 10px;
            links: 10px;
            rechts: 10px;
            unten: 10px;
            Hintergrundfarbe: rgb(7, 15, 26);
            Randradius: 50 %;
        }

5. Definieren Sie den blauen Ringeffekt. Da dieser in Schritt 4 durch den kleinen Kreis abgedeckt ist, können Sie direkt einen blauen Kreis mit Farbverlauf definieren, um den blauen Ring zu erhalten:

.Ring{
            Position: absolut;
            oben: 0;
            links: 0;
            Breite: 75px;
            Höhe: 150px;
            Hintergrundbild: linearer Farbverlauf (180 Grad, RGB (22, 121, 252), transparent 80 %);
            Rahmenradius: 75px 0 0 75px;
            
        }

Hintergrundbild: linearer Farbverlauf (180 Grad, RGB (22, 121, 252), transparent 80 %); Farbverlauf, zuerst blau, dann Übergang zu transparenter Farbe.

6. Definieren Sie die kleine leuchtende Kugel auf dem Ring:

.ring::nach{
            Inhalt: '';
            Position: absolut;
            rechts: -5px;
            oben: -2,5px;
            Breite: 15px;
            Höhe: 15px;
            Hintergrundfarbe: RGB (40, 124, 202);
            Kastenschatten: 0 0 5px rgb(40, 151, 202),
            0 0 10px rgb(40, 124, 202),
            0 0 20px rgb(40, 124, 202),
            0 0 30px rgb(40, 124, 202),
            0 0 40px rgb(40, 124, 202),
            0 0 50px rgb(40, 124, 202),
            0 0 60px rgb(40, 124, 202),
            0 0 60px rgb(40, 124, 202);
            Randradius: 50 %;
            Z-Index: 1;
            
        }

Box-Shadow: Schatten.
z-Index: 1; Wird auf der obersten Ebene angezeigt.

7. Definieren Sie die Textladung:

.container>span{
            Position: absolut;
            links: 50%;
            oben: 50 %;
            transformieren: übersetzen(-50 %,-50 %);
            Farbe: RGB (20, 129, 202);
            Textschatten: 0 0 10px rgb(20, 129, 202),
            0 0 30px rgb(20, 129, 202),
            0 0 60px rgb(20, 129, 202),
            0 0 100px rgb(20, 129, 202);
            Schriftgröße: 18px;
            Z-Index: 1;
       
        }

links: 50%;
oben: 50 %;
Transformieren: Verschieben (-50 %, -50 %); Zentrierte Ausrichtung.
Textschatten: Textschatten.

Vollständiger Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        *{
            Rand: 0;
            Polsterung: 0;
            Box-Größe: Rahmenbox;
        }
        Körper{
            Höhe: 100vh;
            Anzeige: Flex;
            Inhalt ausrichten: zentriert;
            Elemente ausrichten: zentrieren;
            Hintergrundfarbe: rgb(7, 15, 26);
        }
        .Container{
            Position: relativ;
            Höhe: 150px;
            Breite: 250px;
            -webkit-box-reflect: unter 1px linearer Farbverlauf (transparent, RGB (7, 15, 26));
        }
        .container>span{
            Position: absolut;
            links: 50%;
            oben: 50 %;
            transformieren: übersetzen(-50 %,-50 %);
            Farbe: RGB (20, 129, 202);
            Textschatten: 0 0 10px rgb(20, 129, 202),
            0 0 30px rgb(20, 129, 202),
            0 0 60px rgb(20, 129, 202),
            0 0 100px rgb(20, 129, 202);
            Schriftgröße: 18px;
            Z-Index: 1;
       
        }     
        .Kreis{
            Position: relativ;
            Rand: 0 automatisch;
            Höhe: 150px;
            Breite: 150px;
            Hintergrundfarbe: rgb(13, 10, 37);
            Randradius: 50 %;
            Animation: Zhuan 2s linear unendlich;
        }
        @keyframes zhuan{
            0 %{ 
               
                transformieren: drehen (0 Grad);
            }
            100 %{
                
                 transformieren: drehen (360 Grad);
            }
        }
        .circle::nach{
            Inhalt: '';
            Position: absolut;
            oben: 10px;
            links: 10px;
            rechts: 10px;
            unten: 10px;
            Hintergrundfarbe: rgb(7, 15, 26);
            Randradius: 50 %;
        }
        
        .Ring{
            Position: absolut;
            oben: 0;
            links: 0;
            Breite: 75px;
            Höhe: 150px;
            Hintergrundbild: linearer Farbverlauf (180 Grad, RGB (22, 121, 252), transparent 80 %);
            Rahmenradius: 75px 0 0 75px;
            
        }
        
        .ring::nach{
            Inhalt: '';
            Position: absolut;
            rechts: -5px;
            oben: -2,5px;
            Breite: 15px;
            Höhe: 15px;
            Hintergrundfarbe: RGB (40, 124, 202);
            Kastenschatten: 0 0 5px rgb(40, 151, 202),
            0 0 10px rgb(40, 124, 202),
            0 0 20px rgb(40, 124, 202),
            0 0 30px rgb(40, 124, 202),
            0 0 40px rgb(40, 124, 202),
            0 0 50px rgb(40, 124, 202),
            0 0 60px rgb(40, 124, 202),
            0 0 60px rgb(40, 124, 202);
            Randradius: 50 %;
            Z-Index: 1;
            
        }
      
    </Stil>
</Kopf>
<Text>
    <div Klasse="Container">
        <span>Wird geladen...</span>
        <div Klasse="Kreis">
            <div Klasse="Ring"></div>
        </div>
    </div>
</body>
</html>

Zusammenfassen:

Dies ist das Ende dieses Artikels über die Verwendung von HTML+CSS zum Erzielen von Surround-Reflexionsladeeffekten. Weitere relevante Inhalte zu HTML+CSS-Surround-Reflexionsladeeffekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Sonderzeichen in HTML anzeigen (mit Sonderzeichen-Korrespondenztabelle)

>>:  Reines HTML+CSS, um einen Tippeffekt zu erzielen

Artikel empfehlen

Einige Einstellungen von Div bezüglich Rahmen und Transparenz

rahmen: Stil = „Rahmenstil: durchgezogen; Rahmenbr...

Implementierungsprinzip und Prozessanalyse der TCP-Leistungsoptimierung

Drei-Wege-Handshake-Phase Anzahl der Wiederholung...

CSS3 realisiert den verschiebbaren Zauberwürfel-3D-Effekt

Hauptsächlich verwendete Wissenspunkte: •CSS3 3D-...

Grafisches Tutorial zur Installation und Konfiguration von mysql 8.0.18.zip (Windows 64 Bit)

Informationen zum Deinstallieren der zuvor instal...

Die Größe der transparenten HTML-Popup-Ebeneninstanz kann eingestellt und proportional sein.

Code kopieren Der Code lautet wie folgt: <!DOC...

Zusammenfassung der 10 am häufigsten gestellten Fragen in Linux-Interviews

Vorwort Wenn Sie sich auf die Stelle eines Betrie...

So richten Sie die Swap-Partition SWAP in Linux 7.7 ein

Die Swap-Partition des Linux-Systems, also die Sw...

MySQL 8.0.16 Installations- und Konfigurations-Tutorial unter Windows 10

In diesem Artikel finden Sie das grafische Tutori...

Einfache Implementierung von Mini-Vue-Rendering

Inhaltsverzeichnis Vorwort Ziel Erster Schritt: S...

JavaScript implementiert das Protokollbeispiel, in dem der Benutzer das Kontrollkästchen aktivieren muss

Legen Sie in js fest, dass der Benutzer vor der Ü...

Installationsschritte für die chinesische Eingabemethode von Ubuntu 20.04

Dieser Artikel installiert die Google-Eingabemeth...

Detailliertes Beispiel für Zeilensperren in MySQL

Vorwort Sperren sind Synchronisierungsmechanismen...

Allgemeine Befehle für MySQL-Autorisierung, Start und Dienststart

1. Vier Startmethoden: 1.mysqld Starten Sie den M...

Eine kurze Erläuterung, wann MySQL interne temporäre Tabellen verwendet

Gewerkschaftsexekution Verwenden Sie zur Vereinfa...

SQL-Methode zum Berechnen der Zeitstempeldifferenz

SQL-Methode zum Berechnen der Zeitstempeldifferen...