HTML CSS animation text effects project in Hindi
नोट :- Html , css project start करने से पहले student को html और css का basic knowledge होना आवश्यक है ।
इस chapter मे हम जानेंगे html और css कि help से webpage मे animation text कैसे display कर सकते है । यहाँ पर एक ही project का 5 अलग अलग example student को समझाने के लिए दिया गया है ।
नीचे दिये गये code को notepad मे type करें ।
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
इस code को run करने पर web page मे animation 1 बार होता है । इस animation को 2 बार display कर सकते है ।
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
इस code को run करने पर web page मे animation 2 बार होता है । अगर आप यह चाहते है कि जब तक web browser open हो animation चलता रहे । इसके लिए नीचे दिये code type कर run करें ।
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
ऊपर दिये गये तीनो example मे animation left to right होता है । Animation को left to right और 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
ऊपर दिये गये सभी example मे animation पुरे text मे होता है । पुरे Text मे animation apply करने के अलावा text के किसी part मे animation display कर सकते है ।
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
इस Example मे animation AMCODESTAR text मे display होता है ।
