Morphismus-Ring-Code-js-Tutorial-php.cn

Morphismus-Ring-Code

Mary-Kate Olsen

Freigeben： 2025-01-03 00:10:39

Original

984 Leute haben es durchsucht

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>

Nach dem Login kopieren

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