CSS text effect style : demo 98

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Ruslan Display)
                        .text-effect{
                            background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 1%, rgba(0,0,0,1) 6%, rgba(0,0,0,0) 7%, rgba(0,0,0,0), rgba(255,255,255,0) 99%),
                                        linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 1%, rgba(0,0,0, 1) 6%, rgba(0,0,0,0) 7%, rgba(0,0,0,0), rgba(255,255,255,0) 99%);
                            background-size: 200%;
                            background-position: 0 0;
                            background-repeat: round;
                            -webkit-background-clip: text;
                            background-clip: text;
                            -webkit-text-fill-color: transparent;
                            text-fill-color: transparent;
                            font-family: 'Ruslan Display', cursive;
                            font-size: 100px;
                            font-weight: 700;
                            line-height: 130px;
                            text-align: center;
                            letter-spacing: 2px;
                            filter: blur(1.5px);
                            position: relative;
                            transition: all 1s linear;
                            animation: vertigo 10s infinite cubic-bezier(.5, -2.49, .29, 0.48) alternate-reverse;
                        }
                        .text-effect:hover{
                            background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(229,195,0,1) 1%, rgba(255,128,15,1) 8%, rgba(255,128,15,1) 10%, rgba(229,195,0,1) 14%, rgba(229,195,0,0) 30%, rgba(255,255,255,0) 99%),
                                        linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(229,195,0,1) 1%, rgba(255,128,15,1) 8%, rgba(255,128,15,1) 10%, rgba(229,195,0,1) 14%, rgba(229,195,0,0) 30%, rgba(255,255,255,0) 99%);
                            background-size: 200%;
                            background-position: 0 0;
                            background-repeat: round;
                            -webkit-background-clip: text;
                            background-clip: text;
                            text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.1), 2px 2px 0px rgba(255, 255, 255, 0.1),
                                        0px 0px 0px rgba(75, 0, 130, 1), 1px 1px 0px rgba(75, 0, 130, 1), 2px 2px 0px rgba(75, 0, 130, 0.4);
                            filter: blur(0px);
                            transform: scale(1.015);
                            transition: all 1s linear;
                            transition-delay: 1s;
                        }
                        .text-effect:before,
                        .text-effect:after{
                            content: attr(data-content);
                            position: absolute;
                            left: 0;
                            right: 0;
                            top: 0;
                            z-index: -1;
                            transition: all 1s linear;
                            transition-delay: 0.2s;
                        }
                        .text-effect:after{
                            color: rgba(0, 0, 0, 0);
                            animation: flow 5s infinite linear;
                        }
                        .text-effect:hover:before{
                            text-shadow: 0px 0px 0px rgba(0, 0, 0, 1), 1px 1px 0px rgba(0, 0, 0, 1);
                            transition-delay: 0.5s;
                        }
                        @keyframes vertigo{
                            0%{ background-position: 0 0, -100% 0, 55800px -31540px; }
                            50%{
                                background-position: -100% 0, 0% 0;
                                transform: scale(1.025);
                            }
                            100%{ background-position: 0 0, -100% 0, -55800px 31540px; }
                        }
                        @keyframes flow{
                            0%{
                                text-shadow: 0 0 20px rgba(255,255,255, 0), 0 0 20px rgba(229,195,0,0.2), 0 0 20px rgba(255,128,15,0.2);
                            }
                            10%{
                                text-shadow: 0 0 15px rgba(200,200,200,0.1), 0 0 15px rgba(229,195,0,0.25), 0 0 15px rgba(255,128,15,0.25);
                            }
                            20%{
                                text-shadow: 0 0 10px rgba(150,150,150,0.2), 5px 0 10px rgba(229,195,0,0.3), -5px 0 10px rgba(255,128,15,0.3);
                            }
                            30%{
                                text-shadow: 0 0 0 rgba(100,100,100,0.4), 10px 1px 4px rgba(229,195,0,0.35), -10px 1px 4px rgba(255,128,15,0.35);
                            }
                            40%{
                                text-shadow: 0 0 0 rgba(50,50,50,0.6), 15px 1px 6px rgba(229,195,0,0.4), -15px 1px 6px rgba(255,128,15,0.40);
                            }
                            50%{
                                text-shadow: 0 0 0 rgba(0,0,0,0.8), 20px 2px 8px rgba(229,195,0,0.5), -20px 2px 8px rgba(255,128,15,0.5);
                            }
                            60%{
                                text-shadow: 0 0 0 rgba(50,50,50,0.6), 15px 1px 6px rgba(229,195,0,0.4), -15px 1px 6px rgba(255,128,15,0.4);
                            }
                            70%{
                                text-shadow: 0 0 0 rgba(100,100,100,0.4), 10px 1px 4px rgba(229,195,0,0.35), -10px 1px 4px rgba(255,128,15,0.35);
                            }
                            80%{
                                text-shadow: 0 0 10px rgba(150,150,150,0.2), 5px 0 10px rgba(229,195,0,0.3), -5px 0 10px rgba(255,128,15,0.3);
                            }
                            90%{
                                text-shadow: 0 0 15px rgba(200,200,200,0.1), 0 0 15px rgba(229,195,0,0.25), 0 0 15px rgba(255,128,15,0.25);
                            }
                            100%{
                                text-shadow: 0 0 20px rgba(255,255,255,0), 0 0 20px rgba(229,195,0,0.2), 0 0 20px rgba(255,128,15,0.2);
                            }
                        }
                        @media only screen and (max-width: 990px){
                            .text-effect{ font-size: 90px; }
                        }
                        @media only screen and (max-width: 767px){
                            .text-effect{ font-size: 70px; }
                        }
                        @media only screen and (max-width: 576px){
                            .text-effect{ font-size: 55px; }
                        }
                        @media only screen and (max-width: 479px){
                            .text-effect{
                                font-size: 40px;
                                line-height: 50px;
                            }
                        }
                    
License Terms