Html css 2d animation text effects using gradient color in english
In this chapter, we will know html, css that can display text animation in webpage with help.
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; background-color: black; } .txt { color:white; background:#000000; font-size:8em; } .txt::before { content: 'AMCODESTAR'; position: absolute; mix-blend-mode: difference; filter: blur(1px); } .neon-wrapper { filter: brightness(200%); overflow: hidden; } .gradient{ background: linear-gradient (130deg, rgba (6, 227, 250,1) 5%, rgba (229, 151, 64.1) 100%); position: absolute; left:0; width: 100%; height:100%; mix-blend-mode: multiply; } .dodge { background: radial-gradient (circle,white,black 35%) center / 25% 25%; position: absolute; top:-100%; left:-100%; right:0; bottom:0; mix-blend-mode: color-dodge; animation: dodge-area 4s linear infinite; } @keyframes dodge-area { to { transform: translate (50%,50%); } } </style> </head> <body> <div class="wrapper"> <div class="neon-wrapper"> <span class="txt" > AMCODESTAR</span> <span class="gradient"> </span> <span class="dodge"> </span> </div> </div> </body> </html> |
Output
Example 1.2
|
<!DOCTYPE html> <html> <head> <title>amcodestar </title> <style> * { margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background:gray; } h1 { font-size: 8em; } h1 span { animation: animate 2s linear infinite; } h1 span:nth-child(1) { animation-delay: 0s; } h1 span:nth-child(2) { animation-delay: 0.2s; } h1 span:nth-child(3) { animation-delay: 0.4s; } h1 span:nth-child(4) { animation-delay: 0.6s; } h1 span:nth-child(5) { animation-delay: 0.8s; } h1 span:nth-child(6) { animation-delay: 0.9s; } h1 span:nth-child(7) { animation-delay: 1.1s; } h1 span:nth-child(8) { animation-delay: 1.4s; } h1 span:nth-child(9) { animation-delay: 1.7s; } h1 span:nth-child(10) { animation-delay: 1.9s; } @keyframes animate { 80% { color: #333; } 100% { color:white; text-shadow:0 0 15px red; } } </style> </head> <body> <h1> <span>A</span> <span>M</span> <span>C</span> <span>O</span> <span>D</span> <span>E</span> <span>S</span> <span>T</span> <span>A</span> <span>R</span> </h1> </body> </html> |
Output
Example 1.3
In the above example, the animation is in the text, apart from this the animation can be displayed in the background of the web page.
|
<!DOCTYPE HTML> <html> <head> <title>amcodestar </title> <style> * { margin:0; padding:0; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; } .txt { color: red; font-size:8em; } .gradient{ background: linear-gradient (130deg, rgba (6, 227, 250,1) 5%, rgba (229, 151, 64.1) 100%); position: absolute; top: 0; left:0; width: 100%; height:100%; mix-blend-mode: multiply; } .dodge { background: radial-gradient (circle,white,black 35%) center / 25% 25%; position: absolute; top:-100%; left:-100%; right:0; bottom:0; mix-blend-mode: color-dodge; animation: dodge-area 3s linear infinite; } @keyframes dodge-area { to { transform: translate(50%,50%); } } </style> </head> <body> <span class="txt" >AMCODESTAR </span> <span class="gradient"></span> <span class="dodge"></span> </body> </html> |
Output
