CSS text effect style : demo 228

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Fugaz One)
                        .text-effect{
                            color: #f10;
                            font-family: "Fugaz One", sans-serif;
                            font-size: 100px;
                            font-weight: 600;
                            text-align: center;
                            text-transform: uppercase;
                            position: relative;
                            animation: animate 3s infinite alternate ease-in-out;
                        }
                        @keyframes animate{
                            0% { text-shadow: -6px 4px 0px #ff0000; }
                            10% { text-shadow: 4px -6px 0px #008000; }
                            20% { text-shadow: -9px 4px 0px #0000ff; }
                            30% { text-shadow: 4px -6px 0px #ffff00; }
                            40% { text-shadow: -8px 4px 0px #ffa500; }
                            50% { text-shadow: 4px 5px 0px #800080; }
                            60% { text-shadow: -6px 4px 0px #a52a2a; }
                            70% { text-shadow: 4px 7px 0px #ffc0cb; }
                            80% { text-shadow: -9px -4px 0px #00ff00; }
                            90% { text-shadow: 4px -6px 0px #00ffff; }
                           100% { text-shadow: -9px 4px 0px #008080; }
                        }
                        @media only screen and (max-width: 767px){
                            .text-effect{ font-size: 65px; }
                        }
                        @media only screen and (max-width: 576px){
                            .text-effect{ font-size: 45px; }
                        }
                    
License Terms