Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/01/2014, 20:06
mktalternativa
 
Fecha de Ingreso: enero-2012
Mensajes: 224
Antigüedad: 12 años, 11 meses
Puntos: 1
css3 scroll image

hola como estan quiero hacer un scroll de imagenes con css3 parecido a este http://jsfiddle.net/chriscoyier/Hyg3C/20/

la diferencia es que este es solo una imagen de fondo en el div y el mio son varias imagenes.

El problema que tengo es que cuando termina la ultima imagen queda un gran espacio en blanco y luego se resetea bruscamente y lo que yo quiero es que la primer imagen aparezca pega a la ultima

este es el codigo que uso

gracias

css
Código PHP:


.imghoroscopo max-width60pxpadding0 30px 0 30px;}

#tech-slideshow {
    
height100px;
    
positionrelative;
    
overflowhidden;
}
#tech-slideshow > div {
    
height100px;
    
width1526px;

    
positionabsolute;
    
top0;
    
left0;
    
height100%;
    
    -
moz-transition:  opacity 0.5s ease-out
       -
o-transitionopacity 0.5s ease-out
  -
webkit-transitionopacity 0.5s ease-out
      -
ms-transitionopacity 0.5s ease-out

    -
webkit-animationmoveSlideshow 60s linear infinite;
    -
moz-animation:    moveSlideshow 60s linear infinite;
    
}

@-
webkit-keyframes moveSlideshow {
    
0% { left0; }
    
100% { left: -1684px; }
}
@-
moz-keyframes moveSlideshow {
    
0% { left0; }
    
100% { left: -1684px; }


html

Código PHP:

<div id="tech-slideshow">
    <
div id="tech-slideshow-1">
    <
img src="wp-content/themes/brownaldia/img/01.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/02.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/03.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/04.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/05.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/06.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/07.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/08.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/09.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/10.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/11.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/12.jpg" class="imghoroscopo">
    </
div>
</
div