Text Color Animation using HTML & CSS

Text Color Animation using HTML & CSS

Hello developers, today in this blog you will learn to create a Text Color Animation using HTML & CSS.

The effect is used for applying glowing texture in an object or around the object. The glow effect displays a bright-colored text. The colors will glow in a running mode from the left of the text. The glow effect was mainly used to attract visitors to the text or the sentence.

In this blog (Text Color Animation), on the webpage, there is some text at the center of the webpage. The text will glow with the running effect from the left of the sentence. It can be used on the website to attract your content on the webpage. This animation was made by using the CSS @keyframes property.

The source code of this Text Color Animation using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use this Text Color Animation with your creativity and can take this project to the next level.

Text Color Animation [Source Code]

To make this website (Text Color Animation), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>Text Color Animation || Learningrobo</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h3 class="animate-charcter">Learning Robo</h3> </div> </div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and, remember that you have to create a file with a .css extension.


@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
body{
  background: #333;
}

.container{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  font-family: 'Alfa Slab One', cursive;
}

.animate-charcter
{
  text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #21D4FD 0%,
    #B721FF 29%,
    #85FFBD 67%,
    #008000 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
  font-size: 55px;
  letter-spacing: 10px;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.credit a{
  text-decoration: none;
  color: #21D4FD;
  font-weight: 900;
}

.credit {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: #fff;
  margin-top: 20px;
  text-align: center;
}
We hope you would like this Text Color Animation using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Text Color Animation using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome