text effect style : demo 12

Best jQuery

HTML

                        
Best jQuery

CSS

                        .demo{
                            background-color: #000;
                            padding-bottom: 60px;
                        }
                        .text-effect{
                            color: #fff;
                            font-size: 100px;
                            font-family: fontello, "Arial Black", sans-serif;
                            text-align: center;
                            text-transform: uppercase;
                            margin-top: 25px;
                            display: block;
                            animation: schwing 8s infinite;
                        }
                        @keyframes schwing {
                            0% {text-shadow: 0 0 0 black, 0 0 10px #217a67, 0 0 0 black, 0 0 10px #217a67, 0 0 0 black, 0 0 10px #217a67;}
                            5% {text-shadow: 0.2em 0.2em 0 black, 0.2em 0.2em 10px #217a67, 0.4em 0.4em 0 black, 0.4em 0.4em 10px #217a67, 0.6em 0.6em 0 black, 0.6em 0.6em 10px #217a67;}
                            10% {text-shadow: -0.2em 0.2em 0 black, -0.2em 0.2em 10px #43936a, -0.4em 0.4em 0 black, -0.4em 0.4em 10px #43936a, -0.6em 0.6em 0 black, -0.6em 0.6em 10px #43936a;}
                            15% {text-shadow: -0.2em -0.2em 0 black, -0.2em -0.2em 10px #a6b039, -0.4em -0.4em 0 black, -0.4em -0.4em 10px #a6b039, -0.6em -0.6em 0 black, -0.6em -0.6em 10px #a6b039;}
                            20% {text-shadow: 0.2em -0.2em 0 black, 0.2em -0.2em 10px #d7a715, 0.4em -0.4em 0 black, 0.4em -0.4em 10px #d7a715, 0.6em -0.6em 0 black, 0.6em -0.6em 10px #d7a715;}
                            25% {text-shadow: 0.2em 0.2em 0 black, 0.2em 0.2em 10px #de6505, 0.4em 0.4em 0 black, 0.4em 0.4em 10px #de6505, 0.6em 0.6em 0 black, 0.6em 0.6em 10px #de6505;}
                            30% {text-shadow: -0.2em 0.2em 0 black, -0.2em 0.2em 10px #ea252d, -0.4em 0.4em 0 black, -0.4em 0.4em 10px #ea252d, -0.6em 0.6em 0 black, -0.6em 0.6em 10px #ea252d;}
                            35% {text-shadow: -0.2em -0.2em 0 black, -0.2em -0.2em 10px #e623a5, -0.4em -0.4em 0 black, -0.4em -0.4em 10px #e623a5, -0.6em -0.6em 0 black, -0.6em -0.6em 10px #e623a5;}
                            40% {text-shadow: 0.2em -0.2em 0 black, 0.2em -0.2em 10px #781ba9, 0.4em -0.4em 0 black, 0.4em -0.4em 10px #781ba9, 0.6em -0.6em 0 black, 0.6em -0.6em 10px #781ba9;}
                            45% {text-shadow: 0.2em 0.2em 0 black, 0.2em 0.2em 10px #2c77c9, 0.4em 0.4em 0 black, 0.4em 0.4em 10px #2c77c9, 0.6em 0.6em 0 black, 0.6em 0.6em 10px #2c77c9;}
                            50% {text-shadow: -0.2em 0.2em 0 black, -0.2em 0.2em 10px #2e7683, -0.4em 0.4em 0 black, -0.4em 0.4em 10px #2e7683, -0.6em 0.6em 0 black, -0.6em 0.6em 10px #2e7683;}
                            55% {text-shadow: -0.2em -0.2em 0 black, -0.2em -0.2em 10px #29825f, -0.4em -0.4em 0 black, -0.4em -0.4em 10px #29825f, -0.6em -0.6em 0 black, -0.6em -0.6em 10px #29825f;}
                            60% {text-shadow: 0.2em -0.2em 0 black, 0.2em -0.2em 10px #98b16b, 0.4em -0.4em 0 black, 0.4em -0.4em 10px #98b16b, 0.6em -0.6em 0 black, 0.6em -0.6em 10px #98b16b;}
                            65% {text-shadow: 0.2em 0.2em 0 black, 0.2em 0.2em 10px #a1ad1c, 0.4em 0.4em 0 black, 0.4em 0.4em 10px #a1ad1c, 0.6em 0.6em 0 black, 0.6em 0.6em 10px #a1ad1c;}
                            70% {text-shadow: -0.2em 0.2em 0 black, -0.2em 0.2em 10px #ef9017, -0.4em 0.4em 0 black, -0.4em 0.4em 10px #ef9017, -0.6em 0.6em 0 black, -0.6em 0.6em 10px #ef9017;}
                            75% {text-shadow: -0.2em -0.2em 0 black, -0.2em -0.2em 10px #df2117, -0.4em -0.4em 0 black, -0.4em -0.4em 10px #df2117, -0.6em -0.6em 0 black, -0.6em -0.6em 10px #df2117;}
                            80% {text-shadow: 0.2em -0.2em 0 black, 0.2em -0.2em 10px #f22d82, 0.4em -0.4em 0 black, 0.4em -0.4em 10px #f22d82, 0.6em -0.6em 0 black, 0.6em -0.6em 10px #f22d82;}
                            85% {text-shadow: 0.2em 0.2em 0 black, 0.2em 0.2em 10px #f22d82, 0.4em 0.4em 0 black, 0.4em 0.4em 10px #f22d82, 0.6em 0.6em 0 black, 0.6em 0.6em 10px #f22d82;}
                            90% {text-shadow: 0 0 0 black, 0 0 10px #f22d82, 0 0 0 black, 0 0 10px #f22d82, 0 0 0 black, 0 0 10px #f22d82;}
                            91% {text-shadow: none;}
                            100% {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: 55px; }
                        }
                        @media only screen and (max-width: 479px){
                            .text-effect{ font-size: 40px; }
                        }
                        @media only screen and (max-width: 359px){
                            .text-effect{ font-size: 35px; }
                        }
                    
License Terms