Skip to main content

Shining Effect On Text | HTML And CSS

by Rustcode
Shining-Effect-On-Text-html-css

Shining Effect On Text Using HTML And CSS

"Shining Effect on Text" is a fancy effect on fonts that can be used as needed in websites. You can use this effect to reveal an image and scroll the page. It is a pure css effect.

In this animation, You will see two lines of text as you can see in the thumbnail image. And those lines text will be revealed from left to right. This has very simple animation code.

If You want to learn effects on image than follow our playlist.

We have button animations that are generally used in website development. You can read more articles on button animation.



01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Shining Effect On Text</title>  
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>


02. HTML

<body>
    <p>YouTube
      <br>
      <a href="https://www.youtube.com/rustcode">https://www.youtube.com/rustcode</a>
    </p>
  </body>



03. CSS

*{
  margin: 0px;
  padding: 0px;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: sans-serif;
  background: #000;
}
a{
  text-decoration: none;
  color: white;
  font-size: 4vmin;
}
p{
  position: relative;
  text-align: center;
  font-size: 8vmin;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-size: 80% 100%;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shineText 6s linear infinite;
}
@keyframes shineText {
  0%{
    background-position-x: -500%;
  }
  100%{
    background-position-x: 500%;
  }
}




04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.




RELATED POST:

Comments

Post a Comment