2

Estoy creando un efecto tipo shine o glow sobre un texto, la animación se activa al hacer hover con el cursor encima del texto y se desactiva al quitarlo.

La animación es una mascara de color gradiante y transparencia que corre de izquierda a derecha 1 sola vez dándole ese efecto de resplandor. Hasta ahí todo bien, el problema surge que después de este efecto, se carga 1 vez más el mismo efecto pero más lento (dejando el cursor encima claro está) y solo llega hasta la mitad del texto. Quiero eliminar ese segundo efecto incompleto.

Ya intenté quitando el infinite para que no se crearan loops pero aun asi persiste. La duración del efecto es mínima .5s

Creo que el problema está en el linear gradient, pero no conozco mucho su uso y cada vez que lo modifico se daña el efecto.

Les dejo el código por si ven algo que no cuadra,

PD: Aumenté la duración del efecto a 5s para que lo noten mas claramente.

Muchas gracias!

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400);

body {
  background-color:#000;
}

.wrapper {
  display: block;
  position: absolute;
  top: 50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
}

h1 a {
  color: #fff;
  font-size: 2em;
  text-decoration: none;
  display: inline-block;
  position: relative;
  font-family: 'Roboto', sans-serif;
}

      .effect-shine:hover  {
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.1) 40%, #000 50%, rgba(0,0,0,.9) 70%); /*define la transparencia*/
  -webkit-mask-size: 200%;
  animation: shine 5s ; /*define la velocidad en segundos*/
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }

  to {
    -webkit-mask-position: -50%;
  }
}
<div class="wrapper">

  <h1 align="center"><a class="effect-shine">EFECTO SHINE</a></h1>
</div>

1 respuesta 1

2

Cambié los valores del -webkit-mask-position:

-webkit-mask-position: 150%;
-webkit-mask-position: -50%;

a

-webkit-mask-position: 200%;
-webkit-mask-position: 0%;

y parecen funcionar bien ahora:

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400);

body {
  background-color:#000;
}

.wrapper {
  display: block;
  position: absolute;
  top: 50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
}

h1 a {
  color: #fff;
  font-size: 2em;
  text-decoration: none;
  display: inline-block;
  position: relative;
  font-family: 'Roboto', sans-serif;
}

.effect-shine:hover  {
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.1) 40%, #000 50%, rgba(0,0,0,.9) 70%); /*define la transparencia*/
  -webkit-mask-size: 200%;
  animation: shine 5s ; /*define la velocidad en segundos*/
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 200%;
  }

  to {
    -webkit-mask-position: 0%;
  }
}
<div class="wrapper">

  <h1 align="center"><a class="effect-shine">EFECTO SHINE</a></h1>
</div>

1
  • Es justo lo que necesitaba, mil gracias por tomarte el tiempo Rene Commented el 17 abr. 2018 a las 18:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.