suchen

Heim >Web-Frontend >js-Tutorial >Morphismus-Ring-Code

Morphismus-Ring-Code

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2025-01-03 00:10:391010Durchsuche

Morphism Ring code

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Morphing-Verlaufsring</title>
    <Stil>
        Körper {
            Rand: 0;
            Höhe: 100 Vh;
            Anzeige: Flex;
            rechtfertigen-Inhalt: Mitte;
            align-items: center;
            Hintergrund: linear-gradient(120deg, #0d1015, #091529);
            Überlauf: versteckt;
        }

        .ring-container {
            Position: relativ;
            Breite: 300px;
            Höhe: 300px;
        }

        .Ring {
            Position: absolut;
            oben: 50 %;
            links: 50 %;
            Breite: 100 %;
            Höhe: 100 %;
            Randradius: 50 %;
            Hintergrund: konischer-Gradient(
            von 0 Grad, #ff7eb3, #ff758c,#ff6a56, 
            #f9a826,#f02fc2#9b00ff,#ff7eb3
            );
            transformieren: übersetzen(-50%, -50%) 
            drehen (0 Grad);
            Animation: rotateRing 5s linear unendlich;
        }

        .ring::before {
            Inhalt: '';
            Position: absolut;
            oben: 50 %;
            links: 50 %;
            Breite: 80 %;
            Höhe: 80 %;
            Hintergrund: linearer Farbverlauf (nach unten rechts, rgba(0, 0, 0, 0,5), rgba(255, 255, 255, 0,1));
            Randradius: 50 %;
            Filter: Unschärfe (10 Pixel);
            transform: Translate(-50%, -50%);
        }

        .ring::after {
            Inhalt: '';
            Position: absolut;
            oben: 50 %;
            links: 50 %;
            Breite: 60 %;
            Höhe: 60 %;
            Hintergrund: rgba(255, 255, 255, 0,1);
            Rand: 2px solid rgba(255, 255, 255, 0,2);
            Randradius: 50 %;
            transform: Translate(-50%, -50%);
        }

        @keyframes rotateRing {
            0 % {
                transformieren: übersetzen(-50%, -50%) 
                drehen (0 Grad);
            }
            100 % {
                transformieren: übersetzen(-50%, -50%)
                drehen (360 Grad);
            }
        }
    </style>
</head>
<Körper>
    <div>

Das obige ist der detaillierte Inhalt vonMorphismus-Ring-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html Filter display position overflow margin border viewport background transform animation flex Translate
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie hänge ich Elemente effizient an ein JavaScript-Array an?Nächster Artikel：Wie hänge ich Elemente effizient an ein JavaScript-Array an?

In Verbindung stehende Artikel

Mehr sehen