Creative Letter Highlighting Animation Effect using CSS3
In this tutorial, we going to see how to create a letter animation effect using CSS3. Now all of the major browsers support CSS3 features so that is the main reason for learning these new methods.
Nowadays using CSS3 with all of its possibilities is a revolution in web design. CSS3 features give an enjoyable opportunity to develop your designs in a way simple and easy.
Creative text effect can now be done without using any JavaScript or images. Adding a little animation to a text can make it eye-popping. There are many ways you can create animations, one of which is adding a letter highlighting effect to your text. Text highlight animations are quick to implement and can do miracles for your website by giving it look especially impressive.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .words { color: #fff; text-transform: uppercase; text-align: center; font-family: sans-serif; } .words span { font-size: 120px; letter-spacing: 2; font-weight: 900; display: inline-block; animation: move 4s ease-in-out infinite; } .words span:nth-child(2) { animation-delay: .5s } .words span:nth-child(3) { animation-delay: 1s } .words span:nth-child(4) { animation-delay: 1.5s } .words span:nth-child(5) { animation-delay: 2s } .words span:nth-child(6) { animation-delay: 2.5s } .words span:nth-child(7) { animation-delay: 3s } .words span:nth-child(8) { animation-delay: 3.5s } .words span:nth-child(9) { animation-delay: 4s } .words span:nth-child(10) { animation-delay: 4.5s } .words span:nth-child(11) { animation-delay: 5s } .words span:nth-child(12) { animation-delay: 5.5s } .words span:nth-child(13) { animation-delay: 6s } .words span:nth-child(14) { animation-delay: 6.5s } .words span:nth-child(15) { animation-delay: 7s } .words span:nth-child(16) { animation-delay: 7.5s } .words span:nth-child(17) { animation-delay: 7s } .words span:nth-child(18) { animation-delay: 7.5s } @keyframes move { 0% { transform: translate(0%, 0) } 50% { text-shadow: 0 0 25px rgba(0, 0, 0, .30) } 100% { transform: translate(0%, 0) } } </style> </head> <body> <div class="words"> <span>S</span> <span>o</span> <span>f</span> <span>t</span> <span>a</span> <span>o</span> <span>x</span> <span> </span> <span>M</span> <span>r</span> <span>a</span> <span>j</span> </div> </body> </html> |
