首页 > 文章 > 前端

使用 html css js 的线圈错觉

来源：dev.to

时间：2024-10-18 15:30:35 409浏览收藏

推广推荐

免费电影APP ➜

支持 PC / 移动端，安全直达

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《使用 html css js 的线圈错觉》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

使用 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 的线圈错觉》文章吧，也可关注golang学习网公众号了解相关技术文章。

声明：本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除