Shining Text Animation

Hello Coder! Welcome to Codewithshobhit Blog. Today we are going to Create Shining Text Animation Effect Using HTML And CSS  

Project Folder Structure:

  • Create a file called  index.html  to serve as the main file.

  • Create a file called  style.css  for the CSS code.
  • Create a file called  script.js  for the JavaScript code.

Shining Text Animation HTML CODE

HTML 
<p>जय श्री राम</p>

Explanation Of HTML CODE

This HTML and CSS code creates a shining text animation effect for the given text "जय श्री राम." The HTML consists of a <p> (paragraph) element containing the text.

Shining Text Animation CSS CODE

CSS 
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
}
p {
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}

Explanation Of CSS CODE

The CSS styles are applied to the body and p elements. The body is set to flex display to center the text both vertically and horizontally, with a black background.

The paragraph (<p>) is styled with a relative position, sans-serif font, uppercase letters, and a font size of 2em. It has a letter spacing of 4px and overflow set to hidden. The text is filled with a linear gradient background that alternates between black and white, creating a shining effect. The gradient is animated using the @keyframes rule with the animate animation. The background position is shifted from -500% to 500%, creating a scrolling effect, and the animation lasts for 3 seconds with linear timing and repeats infinitely. Additionally, -webkit-background-clip is used to clip the background to the text, and -webkit-text-fill-color is set to transparent to make the text itself invisible, allowing the shining effect to be visible through the text.

Live Preview Of Shining Text Animation

See the Pen Shining Text Animation Effects by Codewithshobhit (@Codewithshobhit) on CodePen.

Conclusion

In conclusion, the provided HTML and CSS code achieves a captivating shining text animation effect for the phrase "जय श्री राम." The animation is orchestrated through keyframes, gradually shifting a linear gradient background behind the text to create a dynamic shine. The use of flexbox ensures the text is centered both horizontally and vertically on the webpage, and various text styling properties, such as letter spacing and uppercase transformation, contribute to the overall visual appeal. The clever use of -webkit-background-clip and -webkit-text-fill-color properties allows the background shine to be visible through the text, adding an extra layer of visual interest. Overall, this code provides an elegant and eye-catching solution for creating a shining text animation effect using HTML and CSS.

How to run this Html Css and Js Project in Our Browser?

first, you need a code editor either you can use VS code studio or notepad and then copy the html,css, and javascript code, create separate or different files for coding then combine them, after creating file just click .html file or run from VS Code studio and you can project preview.


Which Code Editor do you use to create those projects?

I am using VS Code Studio.


is this project responsive or not?

Yes! this project is a responsive project.

If you enjoyed reading this post and found it useful, please share it with your friends and follow me on Instagram.

Thanks for reading!

Author: Shobhit 😊