Energy ball animation effect

In this tutorial I will show you how to create Energy Ball Animation effect using Elementor Pro. Here I will use few line of HTML and CSS code. Will not use any more extra plugin. So your site will be overloaded. This is a simple and fun effect. By creating this type of fun effect you can make your website to standout.

Essential Links

Get Domain & Webhosting(60% off)

Get Elementor Pro

html code

CSS code

Copy this HTML Code

<div class="energy">
 <span style="--clr:#fbad04; --i:18px; --d:2.5s"></span>
 <span style="--clr:#03a1d9; --i:13px; --d:5s"></span>
 <span style="--clr:#f7036d; --i:15px; --d:7.5s"></span>
 <span style="--clr:#93ff16; --i:20px; --d:10s"></span>
</div>

Copy CSS Code

:root{
    --size: 300px;
    --blur:30px;
    --to:100px;
}

selector .energy{
	position: relative;
	width: var(--size);
	height: var(--size);
}
selector .energy span{
	position: absolute;
	width: calc(var(--size) + var(--i));
	height: calc(var(--size) + var(--i));
	background: var(--clr);
	border-radius: 50%;
	transform-origin: calc(var(--to) + var(--i));
	animation: animate 5s linear infinite;
	animation-duration: calc(var(--d));
	mix-blend-mode: plus-lighter; /* add transparency */
	filter: blur(var(--blur)); /* add blur */
}

selector .energy span:nth-child(even){
    animation-direction: reverse;
}

@keyframes animate{
	0%{
		transform: rotate(0deg);
	}

	100%{
		transform: rotate(360deg);
	}
}