Vienkārša automātiska attēlu maiņa ar CSS palīdzību

by Antikrists

HTML

<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

@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; }