CSS text effect style : demo 181

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Viga)
                    .text-effect{
                        color: #f1f1f1;
                        font-family: 'Viga', sans-serif;
                        font-size: 100px;
                        font-weight: 700;
                        text-align: center;
                    }
                    .text-effect span{
                        display: inline-block;
                        animation: zoomup 3s ease infinite;
                        animation-delay: calc(100ms * var(--i));
                    }
                    .text-effect span:nth-child(1){ --i:1; }
                    .text-effect span:nth-child(2){ --i:2; }
                    .text-effect span:nth-child(3){ --i:3; }
                    .text-effect span:nth-child(4){ --i:4; }
                    .text-effect span:nth-child(5){ --i:5; }
                    .text-effect span:nth-child(6){ --i:6; }
                    .text-effect span:nth-child(7){ --i:7; }
                    .text-effect span:nth-child(8){ --i:8; }
                    .text-effect span:nth-child(9){ --i:9; }
                    .text-effect span:nth-child(10){ --i:10; }
                    @keyframes zoomup{
                        0%,
                        100% {
                            color: #e056fd;
                            filter: blur(0.5px);
                            text-shadow: 0 0 10px #e056fd, 0 0 20px #e056fd, 0 0 30px #e056fd,
                                        0 0 40px #e056fd, 0 0 50px #e056fd, 0 0 60px #e056fd;
                        }
                        50% {
                            filter: blur(0);
                            color: #f1f1f1;
                            text-shadow: none;
                        }
                    }
                    @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; }
                    }
                    
License Terms