Name: Circular illusion using html css
Rating: 2.2 (7303 reviews)
Author: prince_beec5ccde00b7c6c73

Circular illusion using html css

Prince - Sep 22 -

- Dev Community

HTML CODE

<body>
    <div class="spiral"></div>

</body>

CSS CODE


    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #111;
        }
        .spiral{
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: repeating-conic-gradient(
                black 0deg 5deg,
                white 5deg 10deg
            );
            animation: spin 15s linear infinite;
            box-shadow: 0 0 25px rgba(255, 255, 255, 0.2),
            0 0 50px rgba(255, 255, 255, 0.4),
            0 0 100px rgba(255, 255, 255, 0.6);
        }

        @keyframes spin{
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
    </style>