Hai Guys, In This Post I will Teach You How To Add Animated Colour Changing Background for Blogger. You can make your background change to different colours with animation using keyframes CSS. You can follow the step below to Add Animated Colour Changing Background in Blogger Easily.
Remove existing background CSS code in your blogger template :
Search for body then remove background property with value as shown in above image.
Add new Background CSS Code:
1. Go to Blogger dashboard
2. Click on Template, here you will see Edit HTML button so click on it
3. Now in template coding structure search for </b:skin>
4. Copy and Paste below code above/before </b:skin>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | body { animation: colorBackground 22s infinite; -webkit-animation: colorBackground 22s infinite; -moz-animation: colorBackground 22s infinite; -o-animation: colorBackground 22s infinite; } @keyframes colorBackground { 0% { background-color: #B461FB; color: #B461FB; } 20% { background-color: #74E588; color: #74E588; } 40% { background-color: #F98585; color: #F98585; } 60% { background-color: #50BFE1; color: #50BFE1; } 80% { background-color: #4256EF; color: #4256EF; } 100% { background-color: #B461FB; color: #B461FB; } } @-webkit-keyframes colorBackground { 0% {background-color: #B461FB; color: #B461FB;} 20% {background-color: #74E588; color: #74E588;} 40% {background-color: #F98585; color: #F98585;} 60% {background-color: #50BFE1; color: #50BFE1;} 80% {background-color: #4256EF; color: #4256EF;} 100% {background-color: #B461FB; color: #B461FB;} } @-moz-keyframes colorBackground { 0% {background-color: #B461FB; color: #B461FB;} 20% {background-color: #74E588; color: #74E588;} 40% {background-color: #F98585; color: #F98585;} 60% {background-color: #50BFE1; color: #50BFE1;} 80% {background-color: #4256EF; color: #4256EF;} 100% {background-color: #B461FB; color: #B461FB;} } @-o-keyframes colorBackground { 0% {background-color: #B461FB; color: #B461FB;} 20% {background-color: #74E588; color: #74E588;} 40% {background-color: #F98585; color: #F98585;} 60% {background-color: #50BFE1; color: #50BFE1;} 80% {background-color: #4256EF; color: #4256EF;} 100% {background-color: #B461FB; color: #B461FB;} } |
5. After adding the code, save the template.
