CSS text effect style : demo 192

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Wallpoet)
                    .text-effect{
                        color: rgba(255,255,255,0.7);
                        font-family: 'Wallpoet', cursive;
                        font-size: 100px;
                        font-weight: 400;
                        text-transform: uppercase;
                        text-align: center;
                        animation: 3s linear 0s normal none infinite running animate;
                    }
                    @keyframes animate{
                        0%{ text-shadow: -6px 4px 0px #ff0000; }
                        10%{ text-shadow: 4px -6px 0px green; }
                        20%{ text-shadow: -9px 4px 0px blue;  }
                        30%{ text-shadow: 4px -6px 0px yellow; }
                        40%{ text-shadow: -8px 4px 0px orange; }
                        50%{ text-shadow: 4px 5px 0px purple;  }
                        60%{ text-shadow: -6px 4px 0px brown;  }
                        70%{ text-shadow: 4px 7px 0px pink; }
                        80%{ text-shadow: -9px -4px 0px lime; }
                        90%{ text-shadow: 4px -6px 0px cyan;  }
                        100%{ text-shadow: -9px 4px 0px teal; }
                    }
                    @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