Glowing Ball Animation

Home / Web Code Snippet / Glowing Ball Animation

Glowing Ball Animation


HTML CODE:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
<div class="box">
    <h1>Saksham Digital</h1>
    <div class="container">
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
    </div>
    <div class="container">
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
    </div>
    <div class="container">
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
    </div>
    <div class="container">
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
    </div>
    <div class="container">
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
    </div>
    <div class="container">
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
    </div>
</div>
</body>
</html>

CSS CODE:-

body{
            padding: 0px;
            margin: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: black;
            overflow: hidden;
        }
        h1{
            color: #333;
            font-size: 80px;
            margin-top: 200px;
        }
        .container{
            position: relative;
            min-width: 500px;
            height: 500px;
            margin: -200px;
            transform-origin: right;
            animation: container 5s linear infinite;
        }
        @keyframes container{
            0%{
                filter: hue-rotate(0);
                transform: rotate(0);
            }
            100%{
                filter: hue-rotate(360deg);
                transform: rotate(360deg);
            }
        }
        .container:nth-child(even){
            transform-origin: left;

        }
        .container span{
            position: absolute;
            inset: calc(70px * var(--i));
        }
        .container span::before{
            content: "";
            position: absolute;
            top: 50%;
            left: -15px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: white;
        }
        .container span:nth-child(1)::before{
            background: red;
            box-shadow: 0px 0px 20px red,
            0px 0px 40px red,0px 0px 60px red,
            0px 0px 80px red;
        }
        .container span:nth-child(1){
            animation: animate 8s alternate infinite;
        }
        @keyframes animate{
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        .container span:nth-child(2)::before{
            background: blue;
            box-shadow: 0px 0px 20px blue,
            0px 0px 40px blue,0px 0px 60px blue,
            0px 0px 80px blue;
        }
        .container span:nth-child(2){
            animation: animate1 8s alternate infinite;
        }
        @keyframes animate1{
            0%{
                transform: rotate(360deg);
            }
            100%{
                transform: rotate(0deg);
            }
        }
        .container span:nth-child(3)::before{
            background: yellow;
            box-shadow: 0px 0px 20px yellow,
            0px 0px 40px yellow,0px 0px 60px yellow,
            0px 0px 80px yellow;
        }
        .container span:nth-child(3){
            animation: animate 5s alternate infinite;
        }