CSS text effect style : demo 233

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Russo One)
                        :root{
                            --color:#1e3799;
                            --color1:#8A9B0F;
                            --color2:#C02942;
                            --color3:#00A0B0;
                        }
                        .text-effect{
                            color:transparent;
                            font-family: "Russo One", sans-serif;
                            font-size: 100px;
                            font-weight: 500;
                            text-align: center;
                            letter-spacing: 2px;
                            position: relative;
                        }
                        .text-effect:before{
                            content:attr(data-content);
                            background: linear-gradient(90deg,var(--color) 25%,var(--color1) 0 50%,var(--color2) 0 75%,var(--color3) 0) 0 0/400% 100%;
                            -webkit-background-clip: text;
                            background-clip: text;
                            width: 100%;
                            height:100%;
                            position:absolute;
                            top: 0;
                            left: 0;
                            animation: animate 5s infinite cubic-bezier(0.3,1,0,1);
                        }
                        @keyframes animate{
                            25% {background-position: calc(1*100%/3) 0}
                            50% {background-position: calc(2*100%/3) 0}
                            75% {background-position: calc(3*100%/3) 0}
                            100%{background-position: calc(4*100%/3) 0}
                        }
                        @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; }
                        }
                    
License Terms