HomeCSS Glowing Text Animation in html and css - indicoderz indicoderz May 03, 2021 0 Comments Facebook Twitter Glowing Text Animation in html and css - indicoderz Html code <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1> <span>i</span> <span>n</span> <span>d</span> <span>i</span> <span>c</span> <span>o</span> <span>d</span> <span>e</span> <span>r</span> <span></span> </h1> </body> <html/> Copy Css code body{ background: #000; display: flex; } h1{ font-size: 7em; font-family: 'Caveat', cursive; } h1 span{ display: block; float: left; animation: animate 2.25s linear infinite; margin: 0 5px; padding: 0; position: relative; color: #111; } h1 span:nth-child(1){ animation-delay: 0s; } h1 span:nth-child(2){ animation-delay: .25s; } h1 span:nth-child(2){ animation-delay: .5s; } h1 span:nth-child(3){ animation-delay: .75s; } h1 span:nth-child(4){ animation-delay: 1s; } h1 span:nth-child(5){ animation-delay: 1.25s; } h1 span:nth-child(6){ animation-delay: 1.5s; } h1 span:nth-child(7){ animation-delay: 1.75s; } h1 span:nth-child(8){ animation-delay: 2s; } h1 span:nth-child(9){ animation-delay: 2.25s; } h1 span:nth-child(10){ animation-delay: 2.5s; } @keyframes animate { 0%, 100%{ color: #fff; filter: blur(2px); text-shadow: 0 0 10px #00bbff, 0 0 20px #00bbff, 0 0 40px #00bbff, 0 0 80px #00bbff, 0 0 120px #00bbff, 0 0 200px #00bbff, 0 0 300px #00bbff, 0 0 400px #00bbff; } 5%, 95%{ color: #111; filter: blur(0px); text-shadow: none; } } Copy Download code files Tags CSS Facebook Twitter
Post a Comment