Skip to main content
Aviso eliminado Mejorar los detalles por ComunidadBot
Recompensa finalizada con Montaycabe's answer elegida por ComunidadBot
Aviso añadido Mejorar los detalles por Sasori1264
Recompensa iniciada por un valor de 50 de reputación por Sasori1264
Borre algunas lineas de código innecesario,perdón por el inconveniente.
Origen Enlace
Sasori1264
  • 311
  • 1
  • 10
  • 25

Quiero crear una animación en la que mi imagen de un auto este sobre un paisaje y que el paisaje pase rápidamente (simulando el recorrido del auto) ademas desearía ver que las ruedas de mi auto giraran mientras dure la animación simulando su avance por el paisaje.

    <div class="carro"></div>

CSS:

*{ 
padding: 0;
margin: 0;
}
/*inserto la imagen y le doy un tamaño aceptable*/
body{
background-image: url(paisaje.jpg);
background-size: 1500px;
/*en este bloque defino la animación del background (el paisaje)*/
background-repeat:no-repeat;
-webkit-animation-name:fondo; 
-webkit-animation-duration:0.5s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;

    
}
/*acá simplemente inserto y defino la ubicación de la imagen del auto*/
.carro{
background-image: url(ferrari.jpg);
position: relative;
width: 300px;
height: 150px;
top: 532px;


}

/*en este bloque utilizo los keyframes para hacer que el paisaje (background) haga su animacion de movimiento*/
@-webkit-keyframes fondo{
0%{
background-position: left top;
}
100%{
background-position: right top;
}
}

Justo ahora con ese código solo logro que el paisaje haga su animación (aunque no se ve muy fluido) y desconozco como hacer la animación de las ruedas para que se vean girando, por cierto ¿puedo quitar el color de fondo que trae una imagen descargada con alguna propiedad de css para que en este caso solo se visualice el auto y no su fondo de imagen?

Quiero crear una animación en la que mi imagen de un auto este sobre un paisaje y que el paisaje pase rápidamente (simulando el recorrido del auto) ademas desearía ver que las ruedas de mi auto giraran mientras dure la animación simulando su avance por el paisaje.

    <div class="carro"></div>

CSS:

*{ 
padding: 0;
margin: 0;
}
body{
background-image: url(paisaje.jpg);
background-size: 1500px;

background-repeat:no-repeat;
-webkit-animation-name:fondo; 
-webkit-animation-duration:0.5s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;

    
}
.carro{
background-image: url(ferrari.jpg);
position: relative;
width: 300px;
height: 150px;
top: 532px;


}


@-webkit-keyframes fondo{
0%{
background-position: left top;
}
100%{
background-position: right top;
}
}

Justo ahora con ese código solo logro que el paisaje haga su animación (aunque no se ve muy fluido) y desconozco como hacer la animación de las ruedas para que se vean girando, por cierto ¿puedo quitar el color de fondo que trae una imagen descargada con alguna propiedad de css para que en este caso solo se visualice el auto y no su fondo de imagen?

Quiero crear una animación en la que mi imagen de un auto este sobre un paisaje y que el paisaje pase rápidamente (simulando el recorrido del auto) ademas desearía ver que las ruedas de mi auto giraran mientras dure la animación simulando su avance por el paisaje.

    <div class="carro"></div>

CSS:

*{ 
padding: 0;
margin: 0;
}
/*inserto la imagen y le doy un tamaño aceptable*/
body{
background-image: url(paisaje.jpg);
background-size: 1500px;
/*en este bloque defino la animación del background (el paisaje)*/
background-repeat:no-repeat;
-webkit-animation-name:fondo; 
-webkit-animation-duration:0.5s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;

    
}
/*acá simplemente inserto y defino la ubicación de la imagen del auto*/
.carro{
background-image: url(ferrari.jpg);
position: relative;
width: 300px;
height: 150px;
top: 532px;


}

/*en este bloque utilizo los keyframes para hacer que el paisaje (background) haga su animacion de movimiento*/
@-webkit-keyframes fondo{
0%{
background-position: left top;
}
100%{
background-position: right top;
}
}

Justo ahora con ese código solo logro que el paisaje haga su animación (aunque no se ve muy fluido) y desconozco como hacer la animación de las ruedas para que se vean girando, por cierto ¿puedo quitar el color de fondo que trae una imagen descargada con alguna propiedad de css para que en este caso solo se visualice el auto y no su fondo de imagen?

Borre algunas lineas de código innecesario,perdón por el inconveniente.
Origen Enlace
Sasori1264
  • 311
  • 1
  • 10
  • 25

Quiero crear una animación en la que mi imagen de un auto este sobre un paisaje y que el paisaje pase rápidamente (simulando el recorrido del auto) ademas desearía ver que las ruedas de mi auto giraran mientras dure la animación simulando su avance por el paisaje.

    <div class="carro"></div>

CSS:

*{ 
padding: 0;
margin: 0;
}
body{
background-image: url(paisaje.jpg);
background-size: 1500px;

background-repeat:no-repeat;
-webkit-animation-name:fondo; 
-webkit-animation-duration:0.5s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;

    
}
.carro{
background-image: url(ferrari.jpg);
position: relative;
width: 300px;
height: 150px;
top: 532px;
-webkit-animation-name:carro;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;

}


@-webkit-keyframes fondo{
0%{
background-position: left top;
}
100%{
background-position: right top;
}
}

Justo ahora con ese código solo logro que el paisaje haga su animación (aunque no se ve muy fluido) y desconozco como hacer la animación de las ruedas para que se vean girando, por cierto ¿puedo quitar el color de fondo que trae una imagen descargada con alguna propiedad de css para que en este caso solo se visualice el auto y no su fondo de imagen?

Quiero crear una animación en la que mi imagen de un auto este sobre un paisaje y que el paisaje pase rápidamente (simulando el recorrido del auto) ademas desearía ver que las ruedas de mi auto giraran mientras dure la animación simulando su avance por el paisaje.

    <div class="carro"></div>

CSS:

*{ 
padding: 0;
margin: 0;
}
body{
background-image: url(paisaje.jpg);
background-size: 1500px;

background-repeat:no-repeat;
-webkit-animation-name:fondo; 
-webkit-animation-duration:0.5s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;

    
}
.carro{
background-image: url(ferrari.jpg);
position: relative;
width: 300px;
height: 150px;
top: 532px;
-webkit-animation-name:carro;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;

}


@-webkit-keyframes fondo{
0%{
background-position: left top;
}
100%{
background-position: right top;
}
}

Justo ahora con ese código solo logro que el paisaje haga su animación (aunque no se ve muy fluido) y desconozco como hacer la animación de las ruedas para que se vean girando, por cierto ¿puedo quitar el color de fondo que trae una imagen descargada con alguna propiedad de css para que en este caso solo se visualice el auto y no su fondo de imagen?

Quiero crear una animación en la que mi imagen de un auto este sobre un paisaje y que el paisaje pase rápidamente (simulando el recorrido del auto) ademas desearía ver que las ruedas de mi auto giraran mientras dure la animación simulando su avance por el paisaje.

    <div class="carro"></div>

CSS:

*{ 
padding: 0;
margin: 0;
}
body{
background-image: url(paisaje.jpg);
background-size: 1500px;

background-repeat:no-repeat;
-webkit-animation-name:fondo; 
-webkit-animation-duration:0.5s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;

    
}
.carro{
background-image: url(ferrari.jpg);
position: relative;
width: 300px;
height: 150px;
top: 532px;


}


@-webkit-keyframes fondo{
0%{
background-position: left top;
}
100%{
background-position: right top;
}
}

Justo ahora con ese código solo logro que el paisaje haga su animación (aunque no se ve muy fluido) y desconozco como hacer la animación de las ruedas para que se vean girando, por cierto ¿puedo quitar el color de fondo que trae una imagen descargada con alguna propiedad de css para que en este caso solo se visualice el auto y no su fondo de imagen?

Origen Enlace
Sasori1264
  • 311
  • 1
  • 10
  • 25

CSS: animación de auto con sus ruedas y paisaje animados

Quiero crear una animación en la que mi imagen de un auto este sobre un paisaje y que el paisaje pase rápidamente (simulando el recorrido del auto) ademas desearía ver que las ruedas de mi auto giraran mientras dure la animación simulando su avance por el paisaje.

    <div class="carro"></div>

CSS:

*{ 
padding: 0;
margin: 0;
}
body{
background-image: url(paisaje.jpg);
background-size: 1500px;

background-repeat:no-repeat;
-webkit-animation-name:fondo; 
-webkit-animation-duration:0.5s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;

    
}
.carro{
background-image: url(ferrari.jpg);
position: relative;
width: 300px;
height: 150px;
top: 532px;
-webkit-animation-name:carro;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;

}


@-webkit-keyframes fondo{
0%{
background-position: left top;
}
100%{
background-position: right top;
}
}

Justo ahora con ese código solo logro que el paisaje haga su animación (aunque no se ve muy fluido) y desconozco como hacer la animación de las ruedas para que se vean girando, por cierto ¿puedo quitar el color de fondo que trae una imagen descargada con alguna propiedad de css para que en este caso solo se visualice el auto y no su fondo de imagen?