CSS text effect style : demo 58

Best JQuery

HTML

                        
Best JQuery

CSS

(Fonts required : Cabin Sketch)
                        .demo{ background: #222; }
                        .text-effect{
                            color: #ffff00;
                            font-family: 'Cabin Sketch', cursive;
                            font-size: 100px;
                            text-align: center;
                            text-transform: uppercase;
                            margin: 0 auto;
                            position: relative;
                        }
                        .text-effect span{
                            display: inline-block;
                            animation: animate 0.5s linear infinite both;
                        }
                        .text-effect span:nth-child(1),
                        .text-effect span:nth-child(4),
                        .text-effect span:nth-child(7),
                        .text-effect span:nth-child(10){
                           color: #4cd137;
                        }
                        .text-effect span:nth-child(2),
                        .text-effect span:nth-child(5),
                        .text-effect span:nth-child(8){
                           color: #ff0000;
                        }
                        @keyframes animate{
                            0%, 50%, 100%{ transform: rotate(0deg) scale(1); }
                            25%{ transform: rotate(4deg) scale(0.98); }
                            75%{ transform: rotate(-4deg) scale(1.02); }
                        }
                        @media only screen and (max-width: 990px){
                            .text-effect{ font-size: 100px; }
                        }
                        @media only screen and (max-width: 767px){
                            .text-effect{ font-size: 80px; }
                        }
                        @media only screen and (max-width: 479px){
                            .text-effect{ font-size: 60px; }
                        }
                        @media only screen and (max-width: 359px){
                            .text-effect{ font-size: 45px; }
                        }
                    
License Terms