kenburns
Publicado por alfredo (2 intervenciones) el 25/01/2017 03:09:09
hola soy nuevo en el foro y estoy haciendo mi primera pagina web, en la cabezera estoy usando una imagen con efecto kenburns, lo que quiero hacer es que esa imagen cambie por otra y asi sucesivamente, este es mi codigo css.
y este es mi html:
ah estoy usando este script que me encontre por internet,
no se si alguien me pudiese ayudar, gracias
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
#imageContainer {
background-color: #333;
width: 1420px; height: 600px; overflow: hidden;border: 2px #333 solid;
z-index: -100;
}#imageContainer {
background-color: #333;
width: 1420px; height: 600px; overflow: hidden;border: 2px #333 solid;
z-index: -100;
}@keyframes kenburns {0% {
opacity: 0; }5% {
opacity: 1; }95% {
transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -110px, 0px);
animation-timing-function: ease-in;
opacity: 1; }100% {
transform: scale3d(2, 2, 2) translate3d(-130px, -100px, 0px);
opacity: 0; }}#imageContainer img {
animation: kenburns 20s infinite;}div#texto {
margin-top: -140px;
position: absolute;margin-left:27%;
color: white; text-shadow: black 0.1em 0.1em 0.5em
}y este es mi html:
1
2
3
<div id="imageContainer">
<img src="http://cavaromarketing.com/mx/wp-content/uploads/2015/12/bajaseafoodexpo.jpg" width="" height="" >
</div>
1
<script src="//www.kirupa.com/prefixfree.min.js"></script>
Valora esta pregunta
0
