CSS text effect style : demo 27

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Audiowide)
                        .demo{ background: #eb2f06; }
                        .text-effect {
                            font-family: 'Audiowide', cursive;
                            text-align: center;
                        }
                        .text-effect span{
                            color: #fff;
                            font-size: 100px;
                            font-weight: 700;
                            text-transform: uppercase;
                            display: inline-block;
                            position: relative;
                        }
                        .text-effect span:before{
                            content: attr(data-title);
                            background-image: linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 0);
                            background-size: 0.5rem 0.5rem;
                            background-clip: text;
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            width: 100%;
                            position: absolute;
                            left: 0.8rem;
                            top: 0.8rem;
                            animation: animate linear 20s infinite;
                        }
                        @keyframes animate{
                            0%{ background-position: 0 0; }
                            100%{ background-position: -100% -100%; }
                        }
                        @media only screen and (max-width: 990px){
                            .text-effect span{ font-size: 80px; }
                        }
                        @media only screen and (max-width: 767px){
                            .text-effect span{ font-size: 55px; }
                            .text-effect span:before{
                                left: 0.4rem;
                                top: 0.4rem;
                            }
                        }
                        @media only screen and (max-width: 479px){
                            .text-effect span{ font-size: 40px; }
                        }
                        @media only screen and (max-width: 359px){
                            .text-effect span{ font-size: 35px; }
                        }
                    
License Terms