Maison >interface Web >js tutoriel >Illusion de spirale hypnotique utilisant HTML CSS et Javascript

Illusion de spirale hypnotique utilisant HTML CSS et Javascript

Mary-Kate Olsenoriginal: 2024-12-04 15:42:12837parcourir

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>

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!

JavaScript css html using display position overflow margin padding border viewport background transform animation flex Translate

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment puis-je détecter les modifications d'entrée en temps réel dans jQuery au-delà de l'événement .change() ?Article suivant：Comment puis-je détecter les modifications d'entrée en temps réel dans jQuery au-delà de l'événement .change() ?

Articles Liés

Voir plus