CSS text effect style : demo 122

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Nunito)
                    .text-effect{
                        color: #fff;
                        font-family: 'Nunito', sans-serif;
                        font-size: 100px;
                        font-weight: 700;
                        text-align: center;
                        letter-spacing: 2px;
                        animation: 4s animate linear infinite;
                    }

                    @keyframes animate{
                        0%,20%,40%,60%,80%,100%{
                            color: #fff;
                            text-shadow: none;
                        }
                        10%{
                            color: transparent;
                            text-shadow: 2px 2px #eb3b5a,4px 4px #eb3b5a,6px 6px #eb3b5a,8px 8px #eb3b5a,10px 10px #eb3b5a;    
                        }
                        30%{
                            color: transparent;
                            text-shadow: 2px 2px #fa8231,4px 4px #fa8231,6px 6px #fa8231,8px 8px #fa8231,10px 10px #fa8231;    
                        }
                        50%{
                            color: transparent;
                            text-shadow: 2px 2px #20bf6b,4px 4px #20bf6b,6px 6px #20bf6b,8px 8px #20bf6b,10px 10px #20bf6b;    
                        }
                        70%{
                            color: transparent;
                            text-shadow: 2px 2px #0fb9b1,4px 4px #0fb9b1,6px 6px #0fb9b1,8px 8px #0fb9b1,10px 10px #0fb9b1;    
                        }
                        90%{
                            color: transparent;
                            text-shadow: 2px 2px #8854d0,4px 4px #8854d0,6px 6px #8854d0,8px 8px #8854d0,10px 10px #8854d0;    
                        }
                    }


                    @media only screen and (max-width: 990px){
                        .text-effect{ font-size: 90px; }
                    }

                    @media only screen and (max-width: 767px){
                        .text-effect{ font-size: 65px; }
                    }

                    @media only screen and (max-width: 576px){
                        .text-effect{ font-size: 50px; }
                    }

                    @media only screen and (max-width: 479px){
                        .text-effect{
                            font-size: 38px;
                            line-height: 35px;
                        }
                    }
                    
License Terms