CSS text effect style : demo 225

                        

                            Best jQuery
                        
                    

                        .demo{ background: #000; }
                        .text-effect{
                            color: #000000e6;
                            font-family: 'Varela Round', sans-serif;
                            font-size: 100px;
                            font-weight: 900;
                            text-align: center;
                            text-transform: uppercase;
                            position: relative;
                            animation: animate 1.5s infinite alternate ease-in-out;
                        }
                        @keyframes animate {
                            0% {
                                text-shadow: 4px -4px 0 hsla(0, 100%, 50%, 1),3px -3px 0 hsla(0, 100%, 50%, 1),2px -2px 0 hsla(0, 100%, 50%, 1), 
                                             1px -1px 0 hsla(0, 100%, 50%, 1),-4px 4px 0 hsla(180, 100%, 50%, 1),-3px 3px 0 hsla(180, 100%, 50%, 1), 
                                            -2px 2px 0 hsla(180, 100%, 50%, 1),-1px 1px 0 hsla(180, 100%, 50%, 1);
                            }
                            25% {    
                                text-shadow: -4px -4px 0 hsla(180, 100%, 50%, 1),-3px -3px 0 hsla(180, 100%, 50%, 1),-2px -2px 0 hsla(180, 100%, 50%, 1), 
                                             -1px -1px 0 hsla(180, 100%, 50%, 1),4px 4px 0 hsla(0, 100%, 50%, 1),3px 3px 0 hsla(0, 100%, 50%, 1), 
                                             2px 2px 0 hsla(0, 100%, 50%, 1),1px 1px 0 hsla(0, 100%, 50%, 1);
                            }
                            50% {
                                text-shadow: -4px 4px 0 hsla(0, 100%, 50%, 1),-3px 3px 0 hsla(0, 100%, 50%, 1),-2px 2px 0 hsla(0, 100%, 50%, 1), 
                                             -1px 1px 0 hsla(0, 100%, 50%, 1),4px -4px 0 hsla(180, 100%, 50%, 1),3px -3px 0 hsla(180, 100%, 50%, 1), 
                                             2px -2px 0 hsla(180, 100%, 50%, 1),1px -1px 0 hsla(180, 100%, 50%, 1);
                            }
                            75% {
                                text-shadow: 4px 4px 0 hsla(180, 100%, 50%, 1),3px 3px 0 hsla(180, 100%, 50%, 1),2px 2px 0 hsla(180, 100%, 50%, 1), 
                                             1px 1px 0 hsla(180, 100%, 50%, 1),-4px -4px 0 hsla(0, 100%, 50%, 1),-3px -3px 0 hsla(0, 100%, 50%, 1), 
                                            -2px -2px 0 hsla(0, 100%, 50%, 1),-1px -1px 0 hsla(0, 100%, 50%, 1);
                            }
                            100% {
                                text-shadow: 4px -4px 0 hsla(0, 100%, 50%, 1),3px -3px 0 hsla(0, 100%, 50%, 1),2px -2px 0 hsla(0, 100%, 50%, 1), 
                                             1px -1px 0 hsla(0, 100%, 50%, 1),-4px 4px 0 hsla(180, 100%, 50%, 1),-3px 3px 0 hsla(180, 100%, 50%, 1), 
                                            -2px 2px 0 hsla(180, 100%, 50%, 1),-1px 1px 0 hsla(180, 100%, 50%, 1);
                            }  
                        }
                        @media only screen and (max-width: 767px){
                            .text-effect{ font-size: 65px; }
                        }
                        @media only screen and (max-width: 576px){
                            .text-effect{ font-size: 45px; }
                        }