» »

Автоматическая смена картинок на CSS

Автоматическая смена картинок на CSS

Простой и на некоторых тематических сайтах нужная функция по автоматической смене изображение, что картинки выставленные под клик. Это может быть как рекламный блок или поставлено на главную страницу на ваш материал, где пользователь или гость видеть, и просто переходит на основу, где подробно по этой теме описано.

Ставится код в любое место, где вы хотите видеть и под них прописываются стили в CSS и на этом все. Можно поставить в контейнер и выставить ширину, чтоб корректно смотрелось, как все работает, вы можете посмотреть на демонстраций и понять смысл работы.

HTML

Код
<div class="fadein">
  <img src="http://zornet.ru/Aben/ABGEA/Rin/remont_vannoj12-min.jpg">
  <img src="http://zornet.ru/Aben/ABGEA/Rin/remont_vannoj10-min.jpg">
  <img src="http://zornet.ru/Aben/ABGEA/Rin/remont_vannoj12-min.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; }

Скорость задаем ссами, также можете поставить эффект значение заголовка.

Автор: workman

DEMO
29.09.2017 Просмотров: 229 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar