Maison >interface Web >js tutoriel >Illusion de bobine en utilisant HTML CSS JS

Illusion de bobine en utilisant HTML CSS JS

Patricia Arquetteoriginal: 2024-10-13 22:24:03837parcourir

Coil illusion using html css js

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Concentric Circle Coil Animation</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000000; /* Black background for contrast */
        }

        .coil-container {
            position: relative;
            width: 300px;
            height: 300px;
        }

        .coil-circle {
            position: absolute;
            border: 2px solid white; /* White circles */
            border-radius: 50%;
            opacity: 0; /* Start invisible */
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(0); /* Start small */
                opacity: 0; /* Fade out */
            }
            50% {
                transform: scale(1); /* Scale to full size */
                opacity: 1; /* Fade in */
            }
        }
    </style>
</head>
<body>
    <div class="coil-container"></div>

    <script>
        const container = document.querySelector('.coil-container');
        const numberOfCircles = 20; // Number of concentric circles
        const baseSize = 30; // Base size for the smallest circle

        // Create concentric circles
        for (let i = 0; i < numberOfCircles; i++) {
            const circle = document.createElement('div');
            circle.classList.add('coil-circle');
            const size = baseSize + i * 20; // Increase size for each circle
            circle.style.width = `${size}px`;
            circle.style.height = `${size}px`;
            circle.style.top = `50%`;
            circle.style.left = `50%`;
            circle.style.marginTop = `-${size / 2}px`; // Center vertically
            circle.style.marginLeft = `-${size / 2}px`; // Center horizontally
            circle.style.animationDelay = `${i * 0.2}s`; // Stagger animation
            container.appendChild(circle);
        }
    </script>
</body>
</html>

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!

css html using JS

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：Pourquoi maîtriser les bases est crucial pour les développeurs front-endArticle suivant：Pourquoi maîtriser les bases est crucial pour les développeurs front-end

Articles Liés

Voir plus