CSS text effect style : demo 191

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Permanent Marker)
                    .text-effect{
                        color: #fffafa;
                        font-family: 'Permanent Marker', cursive;
                        font-size: 100px;
                        font-weight: 400;
                        text-align: center;
                    }
                    .text-effect span{
                        display: inline-block;
                        animation: glow 2s ease-in-out both infinite;
                    }
                    .text-effect span:nth-child(1) { animation-delay: -0.2857142857s; }
                    .text-effect span:nth-child(2) { animation-delay: -0.5714285714s; }
                    .text-effect span:nth-child(3) { animation-delay: -0.8571428571s; }
                    .text-effect span:nth-child(4) { animation-delay: -1.1428571429s; }
                    .text-effect span:nth-child(5) { animation-delay: -1.4285714286s; }
                    .text-effect span:nth-child(6) { animation-delay: -1.7142857143s; }
                    .text-effect span:nth-child(7) { animation-delay: -2.2857142857s; }
                    .text-effect span:nth-child(8) { animation-delay: -2.5714285714s; }
                    .text-effect span:nth-child(9) {  animation-delay: -2.8571428571s;}
                    .text-effect span:nth-child(10) { animation-delay: -3s; }
                    @keyframes glow{
                        0%, 100% { text-shadow: 0 0 8.3333333333px #fffafa, 0 -25px 50px tomato, -25px 25px 50px yellow, 25px 25px 50px tomato; }
                        33% { text-shadow: 0 0 8.3333333333px #fffafa, 0 -25px 50px cyan, -25px 25px 50px tomato, 25px 25px 50px cyan; }
                        66% { text-shadow: 0 0 8.3333333333px #fffafa, 0 -25px 50px yellow, -25px 25px 50px cyan, 25px 25px 50px yellow; }
                    }
                    @media only screen and (max-width: 990px){
                        .text-effect{ font-size: 70px; }
                    }
                    @media only screen and (max-width: 767px){
                        .text-effect{ font-size: 60px; }
                    }
                    @media only screen and (max-width: 576px){
                        .text-effect{ font-size: 35px; }
                    }
                    
License Terms