Club para webmasters › Foros › Creación de páginas web › Animación Css HOME
- Este debate tiene 3 respuestas, 2 mensajes y ha sido actualizado por última vez el hace 2 meses, 3 semanas por
Danigofer.
-
AutorEntradas
-
Hola, estoy intentando crear una animación CSS para la home de una pagina web.
Utilizo Generate press premium y he creado un element. Si pongo un color o una foto ningún problema todo encaja.
Pero con la animación que estoy creando, a la vez que se mueven las nubes, se me va ampliando la página web hacia la derecha.
Alguien sabría en que estoy fallando??
Gracias de antemano!
El código original es este: https://codepen.io/agoodwin/pen/NMJoER
El código CSS que estoy poniendo es:@keyframes move-background { overflow: hidden; from { -webkit-transform: translate3d(0px, 0px, 0px); overflow: hidden; } to { -webkit-transform: translate3d(2000px, 0px, 0px); overflow: hidden; } overflow: hidden; } @-webkit-keyframes move-background { from { -webkit-transform: translate3d(0px, 0px, 0px); } to { -webkit-transform: translate3d(0px, 0px, 0px); } overflow: hidden; } @-moz-keyframes move-background { from { -webkit-transform: translate3d(0px, 0px, 0px); overflow: hidden; } to { -webkit-transform: translate3d(2000px, 0px, 0px); overflow: hidden; } overflow: hidden; } @-webkit-keyframes move-background { from { -webkit-transform: translate3d(0px, 0px, px); } to { -webkit-transform: translate3d(0px, 0px, 0px); } } .background-container { background-size: 100px 100px; position: center; padding-top: 350px; padding-bottom: 400px; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; } .stars { background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat; padding-top: 350px; padding-bottom: 40px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; z-index: 0; } .twinkling { width: 100px; height: ; padding-top: 350px; padding-bottom: 40px; background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat; background-size: 100px 100px; position: absolute; right: 0; top: 0; bottom: 0; z-index: 2; -moz-animation: move-background 70s linear infinite; -ms-animation: move-background 70s linear infinite; -o-animation: move-background 70s linear infinite; -webkit-animation: move-background 70s linear infinite; animation: move-background 70s linear infinite; overflow: hidden; } .clouds { overflow: hidden; width: 4200px; height: ; padding-top:px; padding-bottom: px; background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat; background-size: 480px 480px; position: absolute; right: 0; top: 0; bottom: 0; z-index: 3; -moz-animation: move-background 150s linear infinite; -ms-animation: move-background 150s linear infinite; -o-animation: move-background 150s linear infinite; -webkit-animation: move-background 150s linear infinite; animation: move-background 150s linear infinite; } img { right: ; top: 65px; bottom: 65px; height: 250px; width: 250px; position: absolute; z-index: 4; right: 20px; overflow: hidden; }
-
Este debate fue modificado hace 2 meses, 3 semanas por
Danigofer.
Creo que debe ser algún css genérico que se aplica a todas las imágenes o todos los divs, seguramente con algo como aplicarle a ese div en concreto un display: block o un overflow:hidden… me suena que puede ser algo así.
Si lo deseas pásame por ticket la web donde está dando el error par poder darte la solución para tu caso.
Un saludo!
Arreglado poniendo al CSS general de la web:
body {
overflow-x: hidden;
}Un saludo!
Mil gracias! Solucionado
Un saludo!
-
Este debate fue modificado hace 2 meses, 3 semanas por
-
AutorEntradas
- Debes estar registrado para responder a este debate.