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

Ein kurzes Verständnis der Unterschiede zwischen MySQL InnoDB und MyISAM

Vorwort MySQL unterstützt viele Arten von Tabelle...

Detaillierte Analyse der Unterschiede zwischen break und last in Nginx

Lassen Sie uns zunächst über den Unterschied spre...

Bootstrap 3.0 Studiennotizen Rastersystemprinzip

Durch die kurze Einführung in den beiden vorherig...

Dockerfile-Implementierungscode beim Starten von zwei Prozessen in einem Docker-Container

Ich möchte kürzlich einen Docker für Cron-geplant...

Mein CSS-Architekturkonzept – es ist von Person zu Person unterschiedlich, es gibt kein Bestes, nur das Passende

Vorwort <br />Ich arbeite schon eine ganze W...

Grundlegendes Tutorial zur Verwendung der Explain-Anweisung in MySQL

Inhaltsverzeichnis 1. Übersicht 1. Aussagetest er...

Zusammenfassung der in MySQL häufig verwendeten Typkonvertierungsfunktionen (empfohlen)

1. Concat-Funktion. Häufig verwendete Verbindungs...

Detaillierte Erklärung der Interaktion zwischen React Native und IOS

Inhaltsverzeichnis Voraussetzungen RN übergibt We...

Der Browser speichert die relevanten HTTP-Header im Cache, um die Anzahl der HTTP-Anfragen zu minimieren

Ich habe vor Kurzem die 34 goldenen Regeln von Yah...

Analyse der Initialisierung des Quellcodes des Linux-Kernel-Schedulers

Inhaltsverzeichnis 1. Einleitung 2. Grundkonzepte...

Beispielcode zur Implementierung des Verlaufs-Tag-Menüs mit vue+elementui+vuex+sessionStorage

Im Allgemeinen muss, nachdem sich auf der linken ...

HTML verwendet das Titelattribut, um Text anzuzeigen, wenn die Maus darüber schwebt

Code kopieren Der Code lautet wie folgt: <a hr...

Design Association: Warum haben Sie am falschen Ort gesucht?

Ich bin vor ein paar Tagen mit dem Bus zur Arbeit...

Bringen Sie Ihnen Schritt für Schritt bei, wie Sie die vue3.0-Projektarchitektur erstellen

Inhaltsverzeichnis Vorwort: 1. Erstellen Sie ein ...

Linux-Befehl „exa“ (bessere Dateianzeige als „ls“)

Installieren Befolgen Sie zur Installation die RE...