Color Changing Background for Blogger

0 Reviews Post a Review Posted by: Unknown Published On: 02:19 Avaliability Product Avaliable For Sale

tricks

Add to Cart

View Cart Checkout

Today I am showing you how to apply color changing backgrounds for blogger. It is better than having an image as background as it loads very fast since it is a piece of script.

Demo this Background HERE
So lets get started...
1)In the blogger Template,make sure there are no background images in your blog
2)Place the below script just above the line containing ]]></b:skin>

 body {  
   animation: colorBackground 25s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */  
    -webkit-animation: colorBackground 25s infinite; /* Chrome, Safari 5+ */  
    -moz-animation: colorBackground 25s infinite; /* Firefox 5-15 */  
     -o-animation: colorBackground 25s infinite; /* Opera 12.00 */  
 }  
 @keyframes colorBackground {  
    0% { background-color: #fbcf61; color: #fbcf61; }  
    20% { background-color: #6bd57e; color: #6bd57e; }  
    40% { background-color: #ff6f6f; color: #ff6f6f; }  
    60% { background-color: #57cff4; color: #57cff4; }  
    80% { background-color: #0ed4c8; color: #0ed4c8; }  
   100% { background-color: #fbcf61; color: #fbcf61; }  
 }  
 @-webkit-keyframes colorBackground {  
    0% { background-color: #fbcf61; color: #fbcf61; }  
    20% { background-color: #6bd57e; color: #6bd57e; }  
    40% { background-color: #ff6f6f; color: #ff6f6f; }  
    60% { background-color: #57cff4; color: #57cff4; }  
    80% { background-color: #0ed4c8; color: #0ed4c8; }  
   100% { background-color: #fbcf61; color: #fbcf61; }  
 }  
 @-moz-keyframes colorBackground {  
    0% { background-color: #fbcf61; color: #fbcf61; }  
    20% { background-color: #6bd57e; color: #6bd57e; }  
    40% { background-color: #ff6f6f; color: #ff6f6f; }  
    60% { background-color: #57cff4; color: #57cff4; }  
    80% { background-color: #0ed4c8; color: #0ed4c8; }  
   100% { background-color: #fbcf61; color: #fbcf61; }  
 }  
 @-o-keyframes colorBackground {  
    0% { background-color: #fbcf61; color: #fbcf61; }  
    20% { background-color: #6bd57e; color: #6bd57e; }  
    40% { background-color: #ff6f6f; color: #ff6f6f; }  
    60% { background-color: #57cff4; color: #57cff4; }  
    80% { background-color: #0ed4c8; color: #0ed4c8; }  
   100% { background-color: #fbcf61; color: #fbcf61; }  
 }  

And you are Ready to Go!!!
You can change the time by changing 25ms to any value
Change Color as you like