使用 html css js 的线圈错觉-js教程-PHP中文网

使用 html css js 的线圈错觉

碧海醫心

发布： 2024-10-13 22:21:01

转载

920人浏览过

使用 html css js 的线圈错觉

代码

<!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>

登录后复制

以上就是使用 html css js 的线圈错觉的详细内容，更多请关注php中文网其它相关文章！