In this Blog, we are going to learn how to create Animated Background using CSS and HTML.
First of all, create an HTML File and paste the below code.
HTML CODE:
[pastacode manual=”%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang%3D’en’%3E%0D%0A%3Chead%3E%0D%0A%3Cmeta%20charset%3D’UTF-8’%3E%0D%0A%3Cmeta%20name%3D%22robots%22%20content%3D%22noindex%22%3E%0D%0A%0D%0A%3C%2Fhead%3E%0D%0A%0D%0A%3Cbody%3E%0D%0A%3Cdiv%20class%3D%22context%22%3E%0D%0A%3Ch1%3EAnimated%20Background%20Using%20CSS%3C%2Fh1%3E%0D%0A%3C%2Fdiv%3E%0D%0A%0D%0A%3Cdiv%20class%3D%22area%22%20%3E%0D%0A%3Cul%20class%3D%22circles%22%3E%0D%0A%3Cli%3E%3C%2Fli%3E%0D%0A%3Cli%3E%3C%2Fli%3E%0D%0A%3Cli%3E%3C%2Fli%3E%0D%0A%3Cli%3E%3C%2Fli%3E%0D%0A%3Cli%3E%3C%2Fli%3E%0D%0A%3Cli%3E%3C%2Fli%3E%0D%0A%3Cli%3E%3C%2Fli%3E%0D%0A%3Cli%3E%3C%2Fli%3E%0D%0A%3Cli%3E%3C%2Fli%3E%0D%0A%3Cli%3E%3C%2Fli%3E%0D%0A%3C%2Ful%3E%0D%0A%3C%2Fdiv%20%3E%0D%0A%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E” provider=”manual” lang=”default”/]
Now create a CSS file and paste the below code.
[pastacode manual=”%40import%20url(‘https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DExo%3A400%2C700’)%3B%0D%0A%0D%0A*%7B%0D%0Amargin%3A%200px%3B%0D%0Apadding%3A%200px%3B%0D%0A%7D%0D%0A%0D%0Abody%7B%0D%0Afont-family%3A%20’Exo’%2C%20sans-serif%3B%0D%0A%7D%0D%0A%0D%0A%0D%0A.context%20%7B%0D%0Awidth%3A%20100%25%3B%0D%0Aposition%3A%20absolute%3B%0D%0Atop%3A50vh%3B%0D%0A%0D%0A%7D%0D%0A.context%20h1%7B%0D%0Atext-align%3A%20center%3B%0D%0Acolor%3A%20%23fff%3B%0D%0Afont-size%3A%2050px%3B%0D%0A%7D%0D%0A.area%7B%0D%0Abackground%3A%20%234e54c8%3B%20%0D%0Abackground%3A%20-webkit-linear-gradient(to%20left%2C%20%238f94fb%2C%20%234e54c8)%3B%20%0D%0Awidth%3A%20100%25%3B%0D%0Aheight%3A100vh%3B%0D%0A%7D%0D%0A%0D%0A.circles%7B%0D%0Aposition%3A%20absolute%3B%0D%0Atop%3A%200%3B%0D%0Aleft%3A%200%3B%0D%0Awidth%3A%20100%25%3B%0D%0Aheight%3A%20100%25%3B%0D%0Aoverflow%3A%20hidden%3B%0D%0A%7D%0D%0A%0D%0A.circles%20li%7B%0D%0Aposition%3A%20absolute%3B%0D%0Adisplay%3A%20block%3B%0D%0Alist-style%3A%20none%3B%0D%0Awidth%3A%2020px%3B%0D%0Aheight%3A%2020px%3B%0D%0Abackground%3A%20rgba(255%2C%20255%2C%20255%2C%200.2)%3B%0D%0Aanimation%3A%20animate%2025s%20linear%20infinite%3B%0D%0Abottom%3A%20-150px%3B%0D%0A%7D%0D%0A%0D%0A.circles%20li%3Anth-child(1)%7B%0D%0Aleft%3A%2025%25%3B%0D%0Awidth%3A%2080px%3B%0D%0Aheight%3A%2080px%3B%0D%0Aanimation-delay%3A%200s%3B%0D%0A%7D%0D%0A%0D%0A%0D%0A.circles%20li%3Anth-child(2)%7B%0D%0Aleft%3A%2010%25%3B%0D%0Awidth%3A%2020px%3B%0D%0Aheight%3A%2020px%3B%0D%0Aanimation-delay%3A%202s%3B%0D%0Aanimation-duration%3A%2012s%3B%0D%0A%7D%0D%0A%0D%0A.circles%20li%3Anth-child(3)%7B%0D%0Aleft%3A%2070%25%3B%0D%0Awidth%3A%2020px%3B%0D%0Aheight%3A%2020px%3B%0D%0Aanimation-delay%3A%204s%3B%0D%0A%7D%0D%0A%0D%0A.circles%20li%3Anth-child(4)%7B%0D%0Aleft%3A%2040%25%3B%0D%0Awidth%3A%2060px%3B%0D%0Aheight%3A%2060px%3B%0D%0Aanimation-delay%3A%200s%3B%0D%0Aanimation-duration%3A%2018s%3B%0D%0A%7D%0D%0A%0D%0A.circles%20li%3Anth-child(5)%7B%0D%0Aleft%3A%2065%25%3B%0D%0Awidth%3A%2020px%3B%0D%0Aheight%3A%2020px%3B%0D%0Aanimation-delay%3A%200s%3B%0D%0A%7D%0D%0A%0D%0A.circles%20li%3Anth-child(6)%7B%0D%0Aleft%3A%2075%25%3B%0D%0Awidth%3A%20110px%3B%0D%0Aheight%3A%20110px%3B%0D%0Aanimation-delay%3A%203s%3B%0D%0A%7D%0D%0A%0D%0A.circles%20li%3Anth-child(7)%7B%0D%0Aleft%3A%2035%25%3B%0D%0Awidth%3A%20150px%3B%0D%0Aheight%3A%20150px%3B%0D%0Aanimation-delay%3A%207s%3B%0D%0A%7D%0D%0A%0D%0A.circles%20li%3Anth-child(8)%7B%0D%0Aleft%3A%2050%25%3B%0D%0Awidth%3A%2025px%3B%0D%0Aheight%3A%2025px%3B%0D%0Aanimation-delay%3A%2015s%3B%0D%0Aanimation-duration%3A%2045s%3B%0D%0A%7D%0D%0A%0D%0A.circles%20li%3Anth-child(9)%7B%0D%0Aleft%3A%2020%25%3B%0D%0Awidth%3A%2015px%3B%0D%0Aheight%3A%2015px%3B%0D%0Aanimation-delay%3A%202s%3B%0D%0Aanimation-duration%3A%2035s%3B%0D%0A%7D%0D%0A%0D%0A.circles%20li%3Anth-child(10)%7B%0D%0Aleft%3A%2085%25%3B%0D%0Awidth%3A%20150px%3B%0D%0Aheight%3A%20150px%3B%0D%0Aanimation-delay%3A%200s%3B%0D%0Aanimation-duration%3A%2011s%3B%0D%0A%7D%0D%0A%0D%0A%40keyframes%20animate%20%7B%0D%0A%0D%0A0%25%7B%0D%0Atransform%3A%20translateY(0)%20rotate(0deg)%3B%0D%0Aopacity%3A%201%3B%0D%0Aborder-radius%3A%200%3B%0D%0A%7D%0D%0A%0D%0A100%25%7B%0D%0Atransform%3A%20translateY(-1000px)%20rotate(720deg)%3B%0D%0Aopacity%3A%200%3B%0D%0Aborder-radius%3A%2050%25%3B%0D%0A%7D%0D%0A%0D%0A%7D” provider=”manual” lang=”default”/]
Output:
