slider en css con Background-image
Publicado por Wilson (1 intervención) el 25/09/2018 16:26:52
Hola amigos estoy intentando de hacer un backgraund que se mueva y con otro efecto que cuando suben la pagina se queda fijo en el fondo.
mi codo es este esta funciona pero no del todo.
cuando lo pongo si la propiedad de Css animation: nube 2s linear infinite;
se desapreciara una fotografía.
en este código
me gustaria que las tres fotografia se animan como se hace esto?
mi codo es este esta funciona pero no del todo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
.fixed-bg {
background-image: url("img_tree.jpg"), url("img/person.png"), url("img/person3.png");
background-position: 10px 0px, 50px, 50px 50px;
background-repeat: no-repeat, no-repeat, no-repeat; /* no repite las iamgenes */
min-width: 100%;
min-height: 100%;/* espacio de altura */
background-attachment: fixed; /* hace el efecto de subir scroll */
}@keyframes nube {0%{background-position: 0 0;}
50%{background-position: -200 0;}
100%{background-position: -400 0;}
</style>
</head>
<body>
<p>In this example, we have created a fixed background image that will disappear slowly on scroll. Scroll the page to see the effect. <strong>Note:</strong> Try to remove the background-attachment property to really understand this example.</p>
<div class="fixed-bg"></div>
<div style="height:800px;background-color:yellow;">This div is only here to enable scrolling (height = 800 pixels).</div>
</body>
cuando lo pongo si la propiedad de Css animation: nube 2s linear infinite;
se desapreciara una fotografía.
en este código
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.fixed-bg {
background-image: url("img_tree.jpg"), url("img/person.png"), url("img/person3.png");
background-position: 10px 0px, 50px, 50px 50px;
background-repeat: no-repeat, no-repeat, no-repeat; /* no repite las iamgenes */
min-width: 100%;
min-height: 100%;/* espacio de altura */
background-attachment: fixed; /* hace el efecto de subir scroll */
animation: nube 2s linear infinite;}@keyframes nube {0%{background-position: 0 0;}
50%{background-position: -200 0;}
100%{background-position: -400 0;}
</style>
me gustaria que las tres fotografia se animan como se hace esto?
Valora esta pregunta
0
