Foros del Web » Creando para Internet » CSS »

efecto de cambiar de colores

Estas en el tema de efecto de cambiar de colores en el foro de CSS en Foros del Web. hola a todos! quisiera me pudieran orientar de como se hace el efecto que esta en esta pagina http://m-goldstein.com/ es una imagen que me imagino ...
  #1 (permalink)  
Antiguo 10/01/2016, 23:58
 
Fecha de Ingreso: diciembre-2014
Mensajes: 72
Antigüedad: 9 años, 5 meses
Puntos: 0
efecto de cambiar de colores

hola a todos!

quisiera me pudieran orientar de como se hace el efecto que esta en esta pagina

http://m-goldstein.com/

es una imagen que me imagino tiene una capa de colores que tiene transparencia que va cambiando , pero como logro ese efecto??

saludos
  #2 (permalink)  
Antiguo 11/01/2016, 03:36
 
Fecha de Ingreso: junio-2003
Mensajes: 940
Antigüedad: 20 años, 10 meses
Puntos: 8
Respuesta: efecto de cambiar de colores

Hola el estilo que utiliza es el siguiente:
<style>
#container { margin-top: 0; }
.home-header,
.module .inner-back h2 .line {
background: linear-gradient(270deg, #fd03d2, #fd4703, #fded03, #03f0fd);
background-size: 400%;

-webkit-animation: gradFade 20s ease infinite;
-moz-animation: gradFade 20s ease infinite;
animation: gradFade 20s ease infinite;
}
.work-header h1 .line {
background: linear-gradient(
270deg,
#fd03d2, #fd4703, #fded03, #03f0fd );
background-size: 400%;

-webkit-animation: gradFade 20s ease infinite;
-moz-animation: gradFade 20s ease infinite;
animation: gradFade 20s ease infinite;
}
.home-bkg-image {
background-image: url(http://m-goldstein.com/wp-content/up...8/mg-new.jpg);
opacity: 0.19;
}

.pageload-overlay::before {
background-image: linear-gradient(270deg, #fd03d2, #fd4703, #fded03, #03f0fd);
background-size: 400%;
-webkit-animation: gradFade 10s ease infinite;
-moz-animation: gradFade 10s ease infinite;
animation: gradFade 10s ease infinite;
}
</style>

Este es el HTML:
<header class="home-header h100">
<div class="home-bkg-image"></div>
<div class="inner-home-header">
<div class="home-header-content">
<div class="move-wrap" id="elem">
<h1 style="transform: translate(-1.0125px, 8.72958px);">Mark Goldstein</h1>
<p style="transform: translate(-1.0125px, 8.72958px);">Art Direction + Design</p>
<div class="line-wrap" style="transform: translate(1.0125px, -8.72958px);">
<span class="line"></span>
</div>
</div>
</div>
<span class="icon downarrow"></span>
</div>
</header>

No sé si usará un js aparte.

Un saludo

Etiquetas: color, colores, efecto, todo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:39.