Bilžu automātiska maiņa kā slaidrādei.
Liec kur vēlies redzēt
Code
<div class="fadein">
<img src="https://avante.biz/wp-content/uploads/PC-Nature-Wallpapers/PC-Nature-Wallpapers-029.jpg">
<img src="https://avante.biz/wp-content/uploads/PC-Nature-Wallpapers/PC-Nature-Wallpapers-009.jpg">
<img src="https://avante.biz/wp-content/uploads/PC-Nature-Wallpapers/PC-Nature-Wallpapers-001.jpg"></div>
CSS
Code
@keyframes fade {
0% { opacity: 0; }
11.11% { opacity: 1; }
33.33% { opacity: 1; }
44.44% { opacity: 0; }
100% { opacity: 0; }
}
.fadein { position:relative; width:70%;}
.fadein img { position:absolute; width:100%; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s; }
.fadein img:nth-child(2) { animation-delay: 3s; }
.fadein img:nth-child(3) { animation-delay: 6s; }
Iznākums