CSS text effect style : demo 201

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Roboto)
                    .text-effect{
                        background-repeat: no-repeat;
                        font-family: 'Roboto', sans-serif;
                        font-size: 100px;
                        font-weight: 600;
                        text-transform: uppercase;
                        text-align: center;
                        -webkit-text-stroke: 0.02em red;
                        -webkit-text-fill-color: transparent;
                        -webkit-background-clip: text;
                        position: relative;
                        animation: animate 1s ease-in infinite alternate;
                    }

                    @keyframes animate{
                        0%{    
                            background-image: radial-gradient(circle farthest-corner at center center, red 0%, red 50%, transparent 50.1%);
                            background-position: 50% 50%;
                            background-size: 0% 0%; 
                        }
                        100%{  background-size: 500% 600%; }
                    }

                    @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