CSS text effect style : demo 159

                        

                            Best jQuery
                        
                    

                    .demo{ background-color: #000; }
                    .text-effect{
                        color: #000;
                        font-family: 'Bubblegum Sans', cursive;
                        font-size: 100px;
                        font-weight: 600;
                        text-align: center;
                        letter-spacing: 2px;
                        margin: 20px 0 0;
                        text-shadow: 0px 10px 10px rgb(0, 0, 0);
                        position: relative;
                        z-index: 1;
                        animation: shadow 4.0s ease-in-out infinite;
                    }
                    .text-effect:before,
                    .text-effect:after{
                        content: "";
                        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.2) 100%);
                        width: 140px;
                        height: 140px;
                        border-radius: 50%;
                        box-shadow: 0 0 50px rgba(255, 255, 255, 1);
                        opacity: 0.8;
                        transform: translateX(-50%) translateY(-50%);
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        z-index: -1;
                        animation: light 4.0s ease-in-out infinite;
                    }
                    .text-effect:after{
                        opacity: 0.7;
                        z-index: 2;
                    }
                    @keyframes light {
                        0% { left: 32%; }
                        50% {left: 68%; }
                        100% {left: 32%; }
                    }
                    @keyframes shadow{
                        0%{ text-shadow: -9px 2px 5px rgb(0, 0, 0); }
                        50%{ text-shadow: 9px 2px 5px rgb(0, 0, 0); }
                        100% { text-shadow: -9px 2px 5px rgb(0, 0, 0); }
                    }
                    @media only screen and (max-width: 990px){
                        .text-effect{ font-size: 80px; }
                    }
                    @media only screen and (max-width: 767px){
                        .text-effect{ font-size: 60px; }
                    }
                    @media only screen and (max-width: 576px){
                        .text-effect{ font-size: 45px; }
                    }