CSS text effect style : demo 22

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Exo 2)
                        .text-effect {
                            color: transparent;
                            font-family: 'Exo 2', sans-serif;
                            font-size: 100px;
                            font-weight: 900;
                            text-align: center;
                            text-transform: uppercase;
                            margin: 0 auto 0;
                            position: relative;
                        }
                        .text-effect:before,
                        .text-effect:after{
                            content: attr(data-tip);
                            color: cyan;
                            position: absolute;
                            top:0;
                            left: 20%;
                            -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 40%, 0 60%);
                            clip-path: polygon(0% 100%, 100% 100%, 100% 40%, 0 60%);
                            animation: slide1 1.5s infinite linear;
                            animation-delay: 0.5s;
                        }
                        .text-effect:after{
                            color: white;
                            -webkit-clip-path: polygon(0 0, 100% 0%, 100% 36%, 0 56%);
                            clip-path: polygon(0 0, 190% 0%, 100% 36%, 0 56%);
                            animation: slide2 1.5s infinite linear;
                            animation-delay: 0.5s;
                        }
                        @keyframes slide1 {
                            0%{ transform: translateX(0); }
                            50%{ transform: translate(5px, -2%); }
                        }
                        @keyframes slide2 {
                            0%{ transform: translateX(0); }
                            50%{ transform: translate(-5px, 2%); }
                        }
                        @media only screen and (max-width: 990px){
                            .text-effect{ font-size: 80px; }
                        }
                        @media only screen and (max-width: 767px){
                            .text-effect{ font-size: 55px; }
                        }
                        @media only screen and (max-width: 479px){
                            .text-effect{ font-size: 40px; }
                        }
                        @media only screen and (max-width: 359px){
                            .text-effect{ font-size: 35px; }
                        }
                    
License Terms