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.

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);
	}
}

Start Working with me for any wordpress project!

Get in touch

Have a few questions or just want to say hello? Use the form below to get in touch with me! If you are ready to book a new project please click here to fill out a design inquiry.

Call me by Skype (farjana.rashid55)

2 + 5 =

[wpforms id="2272"]