CSS-Filter

At first, it may look like a video but my friend. This is CSS. Check Out this code pen, This is pure magic of css and css filters.

This is a simple Html/CSS code. The steps to create this exact thing are as follows

1. When you observe this closely, there is a ball rotating in 360 degree circle with some random bulge and sparkles throughout which are coming back and going out of the ball.

2. So, First we have to create a circular ball like this.

3. 

<div class="frame">
    <div class="center">
        <div class="ball"></div>
    </div>
</div>
<style>
.ball {
    width: 90px;//sets the width of ball
    height: 90px;//for the height of ball
    background: #fff; //whitecolor of call 
    border-radius: 50%;//gives the circular shape 
    filter: blur(15px); //Applies a blur effect to the image.
}
</style>

Now to add the movement of ball in 360 degree with bulge, we will use transform and animations. Also, since we have the same code for bulges we will run a css loop in order to repeat the same code for each bulge.

The HTML code for creating a bulge is as follows.

<div class="frame">
    <div class="center">
        <div class="ball"></div> //for circular ball
        <div class="blubb-1"></div>//for bulge in ball
        <div class="blubb-2"></div>
        <div class="blubb-3"></div>
        <div class="blubb-4"></div>
        <div class="blubb-5"></div>
        <div class="blubb-6"></div>
        <div class="blubb-7"></div>
        <div class="blubb-8"></div>
    </div>
</div>

Now CSS, it will contain one loop for each bulge

@for $i from 1 through 8 {
    .blubb-#{$i} {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 50px;
        height: 50px;
        transform: rotate( (random(300)) + deg); //for random transformation in bulge

        &:after {
            position: absolute; //to fix the bulge in an absolute computed position
            display: block;
            content: '';
            width: 50px;
            height: 50px;
            background: #fff;
            border-radius: 50%;
            transform-origin: (40 - $i * 3) + px (40 - $i * 3) + px;
            animation: rotate (2.5 + $i / 5) + s ease-in-out ($i / 5) + s infinite;
            filter: blur(5px);
        }
    }
}
@keyframes rotate {
    from {
        transform: rotate(0deg) translate3d(0, 0, 0);
    }
    to {
        transform: rotate(360deg) translate3d(0, 0, 0);
    }
}

• Note - If you do not keep position: absolute, the following image will be generated due to lack of a absolute position. We want the position of the bulge to be fixed. An absolutely positioned element is an element whose computed position value is fixed.

  

  At this point your ball should have random bulge rotating in 360deg infinitely.

• Now its time for adding small balls or sparkles coming out.

<div class="frame">
    <div class="center">
        <div class="ball"></div>
        <div class="blubb-1"></div>
        <div class="blubb-2"></div>
        <div class="blubb-3"></div>
        <div class="blubb-4"></div>
        <div class="blubb-5"></div>
        <div class="blubb-6"></div>
        <div class="blubb-7"></div>
        <div class="blubb-8"></div>
        <div class="sparkle-1"></div>
        <div class="sparkle-2"></div>
        <div class="sparkle-3"></div>
        <div class="sparkle-4"></div>
        <div class="sparkle-5"></div>
        <div class="sparkle-6"></div>
        <div class="sparkle-7"></div>
        <div class="sparkle-8"></div>
        <div class="sparkle-9"></div>
        <div class="sparkle-10"></div>
    </div>
</div>

We have to loop over this 10 sparkles and add animation. The CSS code for sparkles are as follows.

@for $i from 1 through 10 {
    .sparkle-#{$i} {
        position: absolute;
        top: 38px;
        left: 38px;
        transform: rotate( (random(300)) + deg);

        &:after {
            position: absolute;
            display: block;
            content: '';
            width: (7 + $i) + px;
            height: (7 + $i) + px;
            background: #fff;
            border-radius: 50%;
            transform-origin: (60 - $i * 2) + px (60 - $i * 2) + px;
            animation: rotate (3.5 + $i / 5) + s ease-in-out ($i / 5) + s infinite;
            filter: blur(3px);
        }
    }
}

Final Output will be the animated sparkling ball.