CSS text effect style : demo 217

                        

                            Best
                            jQuery
                        
                    

                        .demo{ background: #000; }
                        .text-effect{
                            color: transparent;
                            font-family: 'Suez One', serif;
                            font-size: 100px;
                            font-weight: 700;
                            text-align: center;
                            text-transform: uppercase;
                            position: relative;
                        }
                        .text-effect span{
                            background:linear-gradient(cyan 30%, black 50%, magenta 70%, cyan 99%);
                            -webkit-background-clip:text;
                            -webkit-text-stroke:2px magenta;
                            filter:drop-shadow(3px 1px 1px white);
                            margin: 0 1px;
                            display: inline-block;
                        }
                        .text-effect span:nth-child(1){
                            animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 1s;
                        }
                        .text-effect span:nth-child(2){
                            animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 1.25s;
                        }
                        .text-effect span:nth-child(3){
                            animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 1.5s;
                        }
                        .text-effect span:nth-child(4){
                            animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 1.75s;
                        }
                        .text-effect span:nth-child(5){
                            animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 2s;
                        }
                        .text-effect span:nth-child(6){
                            animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 2.25s;
                        }
                        .text-effect span:nth-child(7){
                            animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 2.5s;
                        }
                        .text-effect span:nth-child(8){
                            animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 2.75s;
                        }
                        .text-effect span:nth-child(9){
                            animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 3s;
                        }
                        .text-effect span:nth-child(10){
                            animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 3.25s;
                        }
                        .text-effect span:nth-child(11){
                            animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 3.5s;
                        }
                        .text-effect span:nth-child(12){
                            animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 3.75s;
                        }
                        @keyframes bg-shift{
                            from{ background-position:500px 200px; }
                            to{ background-position:500px -200px; }
                        }
                        @keyframes spin-in{
                            0%{
                                opacity:1;
                                transform:rotatey(90deg);
                                filter:blur(20px) drop-shadow(3px 1px 1px white);
                            }
                            50%{
                                transform:rotatey(-3600deg);
                                filter:blur(0)drop-shadow(3px 1px 1px white);
                            }
                            100%{
                                opacity:1;
                                transform:rotatey(0);
                            }
                        }
                        @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; }
                        }