Build a Stylish Animated Rainbow Text in Browser Using HTML5 and CSS3 Full Project For Beginners

Build a Stylish Animated Rainbow Text in Browser Using HTML5 and CSS3 Full Project For Beginners

 

Welcome folks today in this blog post we will be building a stylish animated rainbox text in browser using html5 and css3. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

 

<div class="container">
  <h1>SIMPLE CSS RAINBOW TEXT</h1>

  <h2 class="rainbow">Rainbow Text</h2>
</div>
<style>
  @import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url('https://fonts.googleapis.com/css?family=Anton');

body {
  background-color:#607D8B;
}

.container{
  background-color:#E0F2F1;
  padding:10px;
  border-radius:15px;
  box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.75);
}

h1, h2{
  text-align:center;
}

h1 {
  color:rgba(100, 50, 255, .8);
  font-family: 'Pacifico', cursive;
  color:#212121;
}

.rainbow {
  
   /* Font options */
  font-family: 'Pacifico', cursive;
  text-shadow: 2px 2px 4px #000000;
  font-size:40px;
  
   /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 5s infinite; 
  
  /* Internet Explorer */
  -ms-animation: rainbow 5s infinite;
  
  /* Standar Syntax */
  animation: rainbow 5s infinite; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
  0%{color: orange;}    
  10%{color: purple;}   
    20%{color: red;}
  30%{color: CadetBlue;}
    40%{color: yellow;}
  50%{color: coral;}
    60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
    100%{color: orange;}
}

/* Internet Explorer */
@-ms-keyframes rainbow{
   0%{color: orange;}   
  10%{color: purple;}   
    20%{color: red;}
  30%{color: CadetBlue;}
    40%{color: yellow;}
  50%{color: coral;}
    60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
    100%{color: orange;}
}

/* Standar Syntax */
@keyframes rainbow{
    0%{color: orange;}  
  10%{color: purple;}   
    20%{color: red;}
  30%{color: CadetBlue;}
    40%{color: yellow;}
  50%{color: coral;}
    60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
    100%{color: orange;}
}
</style>

 

See also  Build a Live Cricket Scoreboard Animation Design Template With Country Logo in HTML5 and CSS3 Full Project For Beginners

 

 

And now if you open the index.html file inside the browser you will see the below screenshot

 

 

Leave a Reply