CSS text effect style : demo 38

Best Jquery

HTML

                        
Best Jquery

CSS

(Fonts required : Akronim)
                        .demo{ background-image: linear-gradient(to right,#6b1839, #141114); }
                        .text-effect{
                            color: #ffe6ff;
                            font-family: 'Akronim', cursive;
                            font-size: 100px;
                            text-transform: uppercase;
                            text-align: center;
                            letter-spacing: 6px;
                            text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd, -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd, 0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483, 5px 0.3rem 0.5rem rgba(107, 24, 57, 0.5);
                            margin: 0 auto;
                            display: block;
                            animation: animate 2s linear infinite;
                        }
                        @keyframes animate{
                            0%, 25%{
                                color: #ffe6ff;
                                text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd, -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd, 0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483, 5px 0.3rem 0.5rem rgba(107, 24, 57, 0.5);
                            }
                            25%, 50%{
                                color: #ff65bd;
                                text-shadow: none;
                            }
                            50%, 75%{
                                color: #ffe6ff;
                                text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd, -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd, 0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483, 5px 0.3rem 0.5rem rgba(107, 24, 57, 0.5);
                            }
                            75%, 100%{
                                color: #ff2483;
                                text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd, -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd, 0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483, 5px 0.3rem 0.5rem rgba(107, 24, 57, 0.5);
                            }
                        }
                        @media only screen and (max-width: 990px){
                            .text-effect{ font-size: 80px; }
                        }
                        @media only screen and (max-width: 767px){
                            .text-effect{ font-size: 70px; }
                        }
                        @media only screen and (max-width: 479px){
                            .text-effect{ font-size: 45px; }
                        }
                        @media only screen and (max-width: 359px){
                            .text-effect{ font-size: 31px; }
                        }
                    
License Terms