Name: Rectangle illusion effect using html css js
Rating: 4.4 (7747 reviews)
Author: prince_beec5ccde00b7c6c73
Rectangle illusion effect using html css js

Prince - Oct 2 -
- Dev Community
CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Illusion Effect</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: black;
            position: relative;
        }

        .illusion-container {
            position: absolute;
            top: 50%;
            left: 50%;
             /* This centers the container on the screen */
            width: 300px;
            height: 300px;
        }

        .rectangle {
            position: absolute;
            border: 6px solid white; /* Wider border */
            transform: translate(-50%, -50%);
            animation: expand 6s infinite;
            opacity: 0;
        }

        @keyframes expand {
            0% {
                width: 0;
                height: 0;
                opacity: 1;
            }
            100% {
                width: 100%;
                height: 100%;
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="illusion-container">
        <div id="illusion"></div>
    </div>

    <script>
        const illusionContainer = document.getElementById('illusion');

        function createRectangle() {
            const rectangle = document.createElement('div');
            rectangle.classList.add('rectangle');
            illusionContainer.appendChild(rectangle);
            setTimeout(() => {
                rectangle.remove();
            }, 6000); // Remove rectangle after the animation ends
        }

        setInterval(createRectangle, 500); // Reduced gap between rectangles
    </script>
</body>
</html>