Add CSS Powered Animated Color Changing Background In Blogger

Add CSS Powered Animated Color Changing Background In Blogger

Comments: 2
data:blog.title
CSS trick

Most of the Blogger template we use separate background for make little unique. Some Blogger use relevant background for matching their template. Like tech base, tutorial based background. But using background your site will delay to load. If you use image with higher resolution then it will also take extra time to load full template. But by using CSS background we can make our site faster and beautiful. 

Recommended: 

However I have already shared CSS patter for using instead background image.  But this is the little bit different. To create animation I will use 4 keyframes thus it can change one by one. In output we will see like animation. I mean random color changing in template background.


Before proceed you have to change your previous background. If you use any image then you should remove that first. Removing image background is very easy. For example purpose you can get the background image from below script. Here the bold color code and image can be directly delete.

body{background:#D8D8D8 url(http://2.bp.blogspot.com/-Cbz-Y1ezxB0/USDif0nOx4I/AAAAAAAAIcw/xpk2AZufA_U/s1600/bg.png) repeat fixed top center;margin:0;padding:0;color:#333333;font:x-small Georgia Serif;font-size/* */:/**/small;font-size:/**/small;text-align:center;}

This is just illustration in your template it may be different. But also remove background:#D8D8D8 color also if you have already added. After removing current background color and image Just follow the below steps to add this amazing effect on your Blogger template.


changing background demo


Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML->

Step 3
 Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 4 Copy and Paste below code above/before </b:skin>
 
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;}
}

Customization

  • To change the loading delay alter 22s with 30s or more, More seconds means it will take more time to load next background color.
  • To change the background colors just alter the color code. You can get color code from our Color Picker.

Step 5 hit the Save template button.

And check your Blogger template to see the effect. There are different colors are changing behind your Blogger template.  It seems to you just like a rainbow at the back. I hope you and your visitors will love it. And for more tutorials stay tune. 

Speak Your Mind

Helpful as always. Every post you write produce a massive value to your readers that is the only reason it is so popular and has great authority.click here to find out more
primary school web design uk

Thanks for your comment. Wish you best of luck. :up

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *