rernanded
Erfahrenes Mitglied
Hi versuche mit drei Bildern abwechselndes Ein- und Ausfaden. Klappt aber nicht ganz.
MONI
html:
css:
MONI
html:
HTML:
<div id="div2">
<ul id="ifs">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
HTML:
#div2 {
position: absolute;
width: 100%;
height: 100%;
left: 0%;
top: 0%;
z-index:0;
}
#div2 ul {
list-style-type:none;
}
#div2 li span{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
opacity:0;
animation: fade 30s ease-in-out infinite;
-webkit-animation: fade 30s ease-in-out infinite;
-o-animation: fade 30s ease-in-out infinite;
-ms-animation: fade 30s ease-in-out infinite;
-moz-animation: fade 30s ease-in-out infinite;
}
#div2 li:nth-child(1) span{
background:url(images/erstes.jpg) center center no-repeat #FFF;
background-size: 100%;
}
#div2 li:nth-child(2) span{
background:url(images/zweites.jpg) center center no-repeat #FFF;
background-size: 100%;
}
#div2 li:nth-child(3) span{
background:url(images/drittes.jpg) center center no-repeat #FFF;
background-size: 100%;
}
@keyframes fade {
20% {opacity:1;}
0%, 100% {opacity:0;}
}