Illusion de spirale hypnotique utilisant HTML CSS et Javascript-js tutoriel-php.cn

Illusion de spirale hypnotique utilisant HTML CSS et Javascript

Mary-Kate Olsen

Libérer： 2024-12-04 15:42:12

original

912 Les gens l'ont consulté

Hypnotic Spiral illusion using html css and javascript

<!DOCTYPE html>
<html lang="fr">
<tête>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation en spirale hypnotique</title>
    <style>
        * {
            marge : 0 ;
            remplissage : 0 ;
            dimensionnement de la boîte : bordure-boîte ;
            arrière-plan : #000 ;
            débordement : caché ;
            couleur : #fff ;
        }
        corps {
            affichage : flexible ;
            justifier-contenu : centre ;
            aligner les éléments : centre ;
            hauteur : 100vh ;
        }
        .spirale {
            position : relative ;
            largeur : 200 px ;
            hauteur : 200px ;
            animation : rotation 4s linéaire infinie ;
        }
        .spiral::avant {
            contenu: '';
            position : absolue ;
            haut : 0 ;
            gauche : 0 ;
            largeur : 100 % ;
            hauteur : 100 % ;
            rayon de bordure : 50 % ;
            bordure : 2 pixels transparent uni ;
            border-image : conic-gradient (à partir de 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) ;
            bordure-image-tranche : 1 ;
            animation : animerSpiral 10s linéaire infini ;
        }
        .vague {
            position : absolue ;
            haut : 50 % ;
            gauche : 50 % ;
            transformer : traduire (-50 %, -50 %);
            rayon de bordure : 50 % ;
            bordure : 2px rgba solide (255, 255, 255, 0,3) ;
            animation : la facilité de sortie infinie d'expandWave 1 ;
        }

        @keyframes tourne {
            0% { transformation : rotation (0deg); }
            100 % { transformation : rotation (360 deg ); }
        }
        @keyframes animerSpiral {
            0 %, 100 % { transformation : échelle (1); }
            50 % { transformation : échelle (0,5); }
        }
        @keyframes expandWave {
            0% {
                largeur : 0 ;
                hauteur : 0 ;
                opacité : 1 ;
            }
            100 % {
                largeur : 500 px ;
                hauteur : 500 px ;
                opacité : 0 ;
            }
        }
    </style>
&Lt;/tête>
<corps>
    <div>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!