CSS text effect style : demo 234

                        

                            Best jQuery
                        
                    

                        :root{ 
                            --s: -1; 
                            --color1:#D6A2E8;
                            --color2:#82589F;
                        }
                        .text-effect{
                            color:transparent;
                            font-family: "Rowdies", sans-serif;
                            font-size: 100px;
                            font-weight: 500;
                            text-align: center;
                            letter-spacing: 2px;
                            overflow: hidden;
                            position: relative;
                        }
                        .text-effect:before{
                            content: attr(data-content);
                            width: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            text-shadow: 0 0 0 var(--color1), 0 calc(var(--s, 1) * 1.2em) 0 var(--color1);
                            animation: animate 1s infinite;
                        }
                        @keyframes animate{
                            80%, 100% { text-shadow: 0 calc(var(--s, 1) * -1.2em) 0 var(--color2), 0 0 0 var(--color2); }
                        }
                        @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: 40px; }
                        }