Sombras animadas que cambian de color en el texto

Si crees que lo habias visto todo en efectos para el texto, esperate a ver esto. Repitiendo, combinando colores y repartiendo porcentajes con la propiedad text-shadow, conseguimos esta sombra multiplicada. A su vez, utilizando keyframes logramos animarla haciendo que se mueva en todas direcciones y que vaya cambiando de color sin parar. Todo esto utilizando CSS3, sin usar ningun tipo de libreria Javascript. Si quieres ver el codigo para añadir este efecto en tu blog o web, mas abajo lo tienes disponible.

Aqui tienes el resultado con 2 ejemplos, uno con el texto claro sobre un fondo oscuro y viceversa:

con fondo oscuro

con fondo claro

descargar el codigover codigo

<h19>AQUI VA EL TEXTO</h19>

<style>
h19 {
  color: #34ADD5;  /* esto es el color del texto */
  font-size: 60px;  /* esto es el tamaño del texto */
  font-family: Arial Black;  /* esto es el tipo de fuente */
  animation: schwing 8s infinite;
  -moz-animation: schwing 8s infinite;
  -webkit-animation: schwing 8s infinite;
  -o-animation: schwing 8s infinite;
}

@-webkit-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;
  }
}

@-moz-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;
  }
}

@-ms-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;
  }
}

@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;
  }
}
</style>

(Nota: para visualizar perfectamente este efecto, utiliza el navegador Firefox)