Hypnotische Spiralillusion mit HTML-CSS und Javascript-js-Tutorial-php.cn

Hypnotische Spiralillusion mit HTML-CSS und Javascript

Mary-Kate Olsen

Freigeben： 2024-12-04 15:42:12

Original

880 Leute haben es durchsucht

Hypnotic Spiral illusion using html css and javascript

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hypnotische Spiralanimation</title>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
            Boxgröße: border-box;
            Hintergrund: #000;
            Überlauf: versteckt;
            Farbe: #fff;
        }
        Körper {
            Anzeige: Flex;
            rechtfertigen-Inhalt: Mitte;
            align-items: center;
            Höhe: 100 Vh;
        }
        .spirale {
            Position: relativ;
            Breite: 200px;
            Höhe: 200px;
            Animation: Spin 4s linear unendlich;
        }
        .spiral::before {
            Inhalt: '';
            Position: absolut;
            oben: 0;
            links: 0;
            Breite: 100 %;
            Höhe: 100 %;
            Randradius: 50 %;
            Rand: 2 Pixel durchgehend transparent;
            border-image: conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
            Randbild-Slice: 1;
            Animation: animateSpiral 10s linear unendlich;
        }
        .Welle {
            Position: absolut;
            oben: 50 %;
            links: 50 %;
            transform: Translate(-50%, -50%);
            Randradius: 50 %;
            Rand: 2px solid rgba(255, 255, 255, 0,3);
            Animation: expandWave 1s Easeout unendlich;
        }

        @keyframes spin {
            0% { transform: rotieren(0deg); }
            100 % { transform: rotation(360deg); }
        }
        @keyframes animateSpiral {
            0 %, 100 % { transform: scale(1); }
            50 % { transform: scale(0.5); }
        }
        @keyframes expandWave {
            0 % {
                Breite: 0;
                Höhe: 0;
                Deckkraft: 1;
            }
            100 % {
                Breite: 500px;
                Höhe: 500px;
                Deckkraft: 0;
            }
        }
    </style>
</head>
<Körper>
    <div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonHypnotische Spiralillusion mit HTML-CSS und Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!