Twinkling Effect of Circle With CSS

 Twinkling Effect of Circle:-

Code:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
         margin:0;
         padding:0;
          box-sizing:border-box;  
        }
        body{
            overflow: hidden;
            height:100vh;
            background: #000;
        }
        section
        {
            height:100vh;
        }
        span{
            position: absolute;
            pointer-events: none;
            background: #fff;
            animation: animate 5s linear infinite;
        }
        @keyframes animate {
            0%{
                transform: scale(0) translateY(0) rotate(0deg);
            }
            10%{
                opacity: 1;
            }
            90%{
                opacity: 1;
            }
            100%{
                transform: scale(1) rotate(360deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <section></section>
    <script>
        const colors = [
            '#2196f3',
            '#e91e63',
            '#ffeb3b',
            '#74ff1d'
        ]
        function createSquare(){
            const section =document.querySelector('section');
            const square = document.createElement('span');

            var size = Math.random() * 50;

            square.style.width = 20 + size + 'px';
            square.style.height = 20 + size + 'px';

            square.style.borderRadius = 50 + size + '%'; // change in circle shape



            square.style.top = Math.random() * innerHeight + 'px';
            square.style.left = Math.random() * innerWidth + 'px';

            const bg = colors[Math.floor(Math.random() *colors.length)];
            square.style.background  = bg;


            section.appendChild(square);

            setTimeout(()=>{
                square.remove()
            },5000)
        }

        setInterval(createSquare, 150)
    </script>
</body>
</html>

Output:-



Comments

Post a Comment

Please do not enter any spam link in the comment box.

Popular Posts