Select Page

How to create Gooey Balls animation using HTML & CSS ?

Bijay Bhaskar
Published: January 13, 2023

<!DOCTYPE html>

<html>

  

<head>

    <style>

        body {

            display: grid;

            place-items: center;

        }

  

        .loader {

            width: 70px;

            height: 70px;

            position: relative;

            z-index: 999;

        }

  

        .loader::before, .loader::after {

            content: '';

            position: absolute;

            width: inherit;

            height: inherit;

            border-radius: 50%;

            mix-blend-mode: multiply;

            animation:

                rotate92523 2s infinite cubic-bezier(0.77, 0, 0.175, 1);

        }

  

        .loader::before {

            background-color: #5F8D4E;

        }

  

        .loader::after {

            background-color: #6D9886;

            animation-delay: 1s;

        }

  

        @keyframes rotate92523 {

            0%,

            100% {

                left: 35px;

            }

  

            25% {

                transform: scale(.3);

            }

  

            50% {

                left: 0%;

            }

  

            75% {

                transform: scale(1);

            }

        }

    </style>

  

</head>

  

<body>

    <h1 style="color:green">

        GeeksforGeeks

    </h1>

    <h3 style="color:green">

        Rotating pass through balls loader animation

    </h3>

    <div class="loader"></div>

</body>

  

</html>

Source: www.geeksforgeeks.org