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

Detaillierte Erläuterung der Methoden zur Überprüfung und Verwaltung von MySQL-Benutzerrechten

Dieser Artikel veranschaulicht anhand von Beispie...

Vergleichstabelle für chinesische und englische Dateinamen der Founder-Schriftbibliothek

Founder Type Library ist eine Schriftbibliothek, ...

Eine kurze Analyse der Verwendung von HTML-Float

Einige Verwendungen von Float Linke Aufhängung: f...

Detaillierte Erläuterung der 8 Attributwerte des Hintergrundattributs (Interviewfrage)

Der Wert der Hintergrundeigenschaft in CSS Hinter...

MySQL 8.0.20 Installations- und Konfigurations-Tutorial unter Docker

Docker installiert MySQL Version 8.0.20 zu Ihrer ...

Beispielschritte zur Verwendung von AntV X6 mit Vue.js

Inhaltsverzeichnis 0x0 Einführung 0x1 Installatio...

Die automatische Inkrementierung der Primärschlüssel-ID von MySQL wird auf diese Weise nicht verarbeitet

Die automatische Inkrementierung der Primärschlüs...

Ein Beispiel für die Verwendung von Dapr zur Vereinfachung von Microservices von Grund auf

Inhaltsverzeichnis Vorwort 1. Docker installieren...

Der vollständige Prozess der Docker-Image-Erstellung

Inhaltsverzeichnis Vorwort Erstellungsschritte Er...

Vollständiger Code von Vue + iView zur Realisierung der Excel-Upload-Funktion

1. HTML-Teil <Col span="2">Datei ...

mysql5.7.21 UTF8-Kodierungsproblem und -Lösung in der Mac-Umgebung

1. Ziel: Ändern Sie den Wert des character_set_se...

Erfahrungsaustausch zur Reparatur von MySQL InnoDB-Ausnahmen

Eine Reihe von MySQL-Bibliotheken zum Testen. Die...

Warum node.js nicht für große Projekte geeignet ist

Inhaltsverzeichnis Vorwort 1. Anwendungskomponent...

VUE realisiert Registrierungs- und Login-Effekte

In diesem Artikelbeispiel wird der spezifische Co...

Was Sie über Filter in Vue wissen müssen

Inhaltsverzeichnis Vorwort Was ist ein Filter So ...