JMiur [E]

Jugando un poco con CSS. Sólo se trata de basarse en alguno de los ejemplos de Codrops e irlos modificando para tratar de entender como funcionan y sacar conclusiones ... o, simplemente, pasar un buen rato ...

... el HTML es poca cosa ...
<div class="ejemplo">
  <a href="#"><span>?</span></a>
</div>
el resto, claro, depende de los estilos:
<style>
  .ejemplo {
    margin: 30px auto;
    text-align: center;
  }
  .ejemplo a span {
    /* el texto y el recuadro */
    border: 10px solid #FFF;
    color: #FFF;
    font-size: 120px;
    line-height: 200px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
    /* el tamaño */
    display: inline-block;
    position: relative;
    height: 200px;
    width: 300px;
    /* la imagen de fondo (es este caso mide 500x300) */
    background: transparent url(https://lh6.googleusercontent.com/-zD2DFAjpEkI/Txxw9HXNybI/AAAAAAAAAcA/2WnNyP5_P5I/s500/09_0338.jpg) no-repeat 50% 0%;
    /* se la redimensiona y deforma un poco */
    background-size: 500px 400px;
    /* la transición del texto */
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
  }
  .ejemplo a span:hover {
    /* efecto hover sobre el texto */
    color: rgba(255,255,255,0.4);
    text-shadow: 0 0 5px rgba(0,0,0,0.1);
    z-index: 10;
    /* lanzamos la animación */
    -moz-animation: moveImg 10s linear infinite forwards;
    -webkit-animation: moveImg 10s linear infinite forwards;
    -o-animation: moveImg 10s linear infinite forwards;
    -ms-animation: moveImg 10s linear infinite forwards;
    animation: moveImg 10s linear infinite forwards;
  }

  /* esta es la animación en si misma que, simplemente, desplaza el fondo hacia arriba y hacia abajo */
  @-moz-keyframes moveImg {
    0%{background-position: 50% 0%;}
    50%{background-position: 50% 100%;}
    100%{background-position: 50% 0%;}
  }
  @-webkit-keyframes moveImg {
    0%{background-position: 50% 0%;}
    50%{background-position: 50% 100%;}
    100%{background-position: 50% 0%;}
  }
  @keyframes moveImg {
    0%{background-position: 50% 0%;}
    50%{background-position: 50% 100%;}
    100%{background-position: 50% 0%;}
  }
</style>


otra variante:

5 comentarios:

Alicia (Ἄρτεμις)  

ohhh!!! me encanta, ahora tendré que ver donde ponerlo :)

Responder
CraLBilogcu  

awesome !

Responder
Rosendo Ramírez Aquino  

Son bastante atractivos :D

Responder
Taufik Nurrohman  

Wow thanks, I don't know if backgorund-position can be animated. But, I think we don't even need to write down three sessions. Just two session from ... to then implement alternate animation:

.ejemplo a span:hover {
color: rgba(255,255,255,0.4);
text-shadow: 0 0 5px rgba(0,0,0,0.1);
z-index: 10;
-webkit-animation: moveImg 10s linear infinite alternate;
-moz-animation: moveImg 10s linear infinite alternate;
-ms-animation: moveImg 10s linear infinite alternate;
-o-animation: moveImg 10s linear infinite alternate;
-ms-animation: moveImg 10s linear infinite alternate;
animation: moveImg 10s linear infinite alternate;
}

@-webkit-keyframes moveImg {
from {background-position:50% 0%;}
to {background-position:50% 100%;}
}
@-moz-keyframes moveImg {
from {background-position:50% 0%;}
to {background-position:50% 100%;}
}
@-ms-keyframes moveImg {
from {background-position:50% 0%;}
to {background-position:50% 100%;}
}
@-o-keyframes moveImg {
from {background-position:50% 0%;}
to {background-position:50% 100%;}
}
@keyframes moveImg {
from {background-position:50% 0%;}
to {background-position:50% 100%;}
}


It should works :(

Responder
José Puello  

que nítido esta ese efecto css jmiur

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR