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

js, um einen gleitenden Karusselleffekt zu erzielen

In diesem Artikel wird der spezifische Code von j...

Zusammenfassung der grundlegenden Kenntnisse zur MySql-Datenbank

Inhaltsverzeichnis Grundlegende Datenbankvorgänge...

Implementierungscode zum Betreiben einer MySQL-Datenbank in Golang

Vorwort Golang stellt das Datenbank-/SQL-Paket fü...

Detaillierte Erläuterung der MySQL-Sicherung und -Wiederherstellung

Vorwort: In den vorherigen Artikeln wurde die Ver...

So übergeben Sie Parameter über CSS an JS

1. Hintergrund, der durch CSS übergeben werden mu...

So starten Sie mehrere MySQL-Datenbanken auf einem Linux-Host

Lassen Sie uns heute darüber sprechen, wie Sie vi...

So stellen Sie Node.js mit Docker bereit

Vorwort Node wird als mittlere Schicht im Projekt...

Detaillierte Erklärung, wie CocosCreator-Systemereignisse generiert und ausgelöst werden

Inhaltsverzeichnis Umfeld Zusammenfassung Modul F...

Vue+Vant implementiert die obere Suchleiste

In diesem Artikelbeispiel wird der spezifische Co...

So verwenden Sie Node-Scaffolding zum Erstellen eines Servers zur Implementierung der Token-Verifizierung

Inhalt Verwenden Sie Scaffolding, um schnell ein ...

So ändern Sie den iTunes-Sicherungspfad unter Windows

0. Vorbereitung: • Schließen Sie iTunes • Beenden...

Detaillierter Prozess zur Erstellung eines VR-Panoramaprojekts mit React und Threejs

Vor Kurzem habe ich gelernt, React mit Three.js z...

Flex-Anordnung in CSS darstellen (Layouttool)

In Bezug auf die Anzeige: flexibles Layout: Manch...

Detaillierter Prozess der Installation und Konfiguration von MySQL und Navicat Prenium

Voraussetzung: Mac, zsh installiert, mysql herunt...

Der vollständige Implementierungsprozess von Sudoku mit JavaScript

Inhaltsverzeichnis Vorwort So lösen Sie Sudoku Fü...