» »

Автоматическая смена картинок на 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 Просмотров: 596 Комментарий: (2)

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

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

Комментарий: 2
FruTT
FruTT 23.03.2018 23:481
0
Не работает(( хотел разместить на сайт СПАМ 04b
Kosten
Kosten 24.03.2018 00:122
0
Вы устанавливали материал? Дело в том, что ниже есть демонстрация, но как понимаю, вам нужно было поставить спам и не более. По сути можно было на сайт жалобу кинуть, так чтоб поняли, что спамить нельзя.
avatar