suchen

Heim >Web-Frontend >js-Tutorial >Hypnotische Spiralillusion mit HTML-CSS und Javascript

Hypnotische Spiralillusion mit HTML-CSS und Javascript

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-04 15:42:12836Durchsuche

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>

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!

JavaScript css html using display position overflow margin padding 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 kann ich Eingabeänderungen in jQuery in Echtzeit erkennen, die über das .change()-Ereignis hinausgehen?Nächster Artikel：Wie kann ich Eingabeänderungen in jQuery in Echtzeit erkennen, die über das .change()-Ereignis hinausgehen?

In Verbindung stehende Artikel

Mehr sehen