In this tutorial I will show you how to create animated background 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.
Copy this HTML Code
Copy CSS Code
:root{ --color1: #4AF4D1; --color1-shadow: #1C564A; --color2: #F03131; --color2-shadow: #7D1F1F; --size: 20px; } selector .bubbles span{ background: var(--color1); width: var(--size); height: var(--size); display: inline-block; border-radius: 50%; margin: 0 5px; box-shadow: 0 0 0 6px var(--color1-shadow), 0 0 50px var(--color1), 0 0 100px var(--color1); animation:animate 20s linear infinite; animation-duration: calc(125s/var(--i)); } selector .bubbles span:nth-child(even){ background: var(--color2); box-shadow: 0 0 0 6px var(--color2-shadow), 0 0 50px var(--color2), 0 0 100px var(--color2); } @keyframes animate{ 0%{ transform: translateY(100vh) scale(0); } 100%{ transform: translateY(-10vh) scale(1); } }
Thanks for sharing. I read many of your blog posts, cool, your blog is very good.
Your point of view caught my eye and was very interesting. Thanks. I have a question for you.