HTML CSS animation text effects project in English
Note: - Before starting Html, css project, the student must have basic knowledge of html and css.
In this chapter, we will learn how to display animation text in webpage with the help of html and CSS.Here 5 different examples of the same project are given to explain to the student.
Type the code given below into notepad.
Example 1.1
|
<!DOCTYPE html> <html> <head>
<title>css text animation <style> * { margin: 0; padding: 0; } body { display:flex; justify-content: center; align-items: center; min-height:100vh; } h1 { font-size: 8em; position:relative; } h1::before { content: attr(data-text); position:absolute; height:100%; color:red; border-right:2px solid red; overflow: hidden; animation: animate 4s linear ; } @keyframes animate { 0% { width:0; } 100% { width:100%; } } </style> </head> <body>
<h1 data-text="AMCODESTAR.COM"> </body> </html> |
Output
After running this code, the animation occurs 1 time in the web page.This animation can be displayed 2 times.
Example 1.2
|
<!DOCTYPE html> <html> <head>
<title>css text animation <style> * { margin: 0 ; padding: 0 ; } body { display:flex; justify-content: center; align-items: center; min-height: 100 vh; } h 1 { font-size: 8 em; position:relative; } h 1:: before { content: attr(data-text); position:absolute; top: 0 ; left: 0 ; width: 0 ; height: 100% ; color:red; border-right: 2 px solid red; overflow: hidden; animation: animate 4 s; animation-iteration-count: 2 ; } @keyframes animate { 0% { width: 0 ; } 100% { width: 100% ; } } </style> </head> <body> <h 1
data-text="AMCODESTAR.COM"> </body> </html> |
Output
After running this code, the animation occurs 2 times in the web page.If you want the animation to run while the web browser is open.For this, run by typing the code given below.
Example 1.3
|
<!DOCTYPE html> <html> <head>
<title>css text animation <style> * { margin: 0; padding: 0; } body { display:flex; justify-content: center; align-items: center; min-height:100vh; } h1 { font-size: 8em; position:relative; } h1::before { content: attr(data-text); position:absolute; color:red; border-right:2px solid red; overflow: hidden; animation: animate 4s linear infinite; } @keyframes animate { 0% { width:0; } 100% { width:100%; } } </style> </head> <body>
<h1 data-text="AMCODESTAR.COM"> </body> </html> |
Output
In the three examples above, the animation is left to right.Animation can be left to right and right to left.
Example 1.4
|
<!DOCTYPE html> <html> <head>
<title>css text animation <style> * { margin: 0; padding: 0; } body { display:flex; justify-content: center; align-items: center; min-height:100vh; } h1 { font-size: 8em; position:relative; } h1::before { content: attr(data-text); position:absolute; top:0; left:0; width:0; height:100%; color:red; border-right:2px solid red; overflow: hidden; animation: animate 4s linear infinite; } @keyframes animate { 0% { width:0; } 50% { width:100%; } } </style> </head> <body>
<h1 data-text="AMCODESTAR.COM"> </body> </html> |
Output
In all the examples given above, animation takes place in full text.In addition to applying animation to the entire text, you can display the animation in any part of the text.
Example 1.5
|
<!DOCTYPE html> <html> <head>
<title>css text animation <style> * { margin: 0; padding: 0; } body { display:flex; justify-content: center; align-items: center; min-height:100vh; } h1 { font-size: 8em; position:relative; } h1::before { content: attr(data-text); position:absolute; top:0; left:0; width:0; height:100%; color:red; border-right:2px solid red; overflow: hidden; animation: animate 4s linear infinite; } @keyframes animate { 0% { width:0; } 50% { width:75%; } } </style> </head> <body>
<h1 data-text="AMCODESTAR.COM"> </body> </html> |
Output
In this example, the animation is displayed in the AMCODESTAR text.
