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