Html css text effects project text show / hide in english
In this chapter, we will know that with the help of html, css can show and hide any text in web page.
Example 1.1
|
<!DOCTYPE html> <html> <head> <title>amcodestar </title> <style> * { margin:0; padding:0; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } h1 { position:relative; font-size: 8em; overflow: hidden; } h1:before { content:''; position:absolute; left:100%; width:110%; height: 100%; background:white; animation: animate 6s linear infinite; } @keyframes animate { 0% { left:100% } 50% { left:-10% } } </style> </head> <body> <h1>AMCODESTAR .COM</h1> </body> </html> |
Output
Example 1.2
In this example, we will know how to show the previous character when any other character (alphabet letter) starts to hide after the text displayed in the web page is hidden (alphabet letter)?
|
<!DOCTYPE html> <html> <head> <title>amcodestar </title> <style> * { margin:0; padding:0; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } h1 { position:relative; font-size: 8em; overflow: hidden; } h1:before { content:''; position:absolute; left:100%; width:10%; height: 100%; background:white; animation: animate 8s linear infinite; } @keyframes animate { 0% { left:100% } 50% { left:-10% } } </style> </head> <body> <h1>AMCODESTAR .COM</h1> </body> </html> |
Output
Example 1.3
In this example, we will know how to show and hide all the character (alphabet letter) of the text displayed in the web page, besides only showing and hiding some character.
|
<!DOCTYPE html> <html> <head> <title>amcodestar </title> <style> * { margin:0; padding:0; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } h1 { position:relative; font-size: 8em; overflow: hidden; } h1:before { content:''; position:absolute; left:100%; width:110%; height: 100%; background:white; animation: animate 2s linear infinite; } @keyframes animate { 0% { left:100% } 50% { left:45% } } </style> </head> <body> <h1>AMCODESTAR .COM</h1> </body> </html> |
Output
