Страница 1 из 11
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » Смена изображений на CSS
Смена изображений на CSS
workman
Дата: Пятница, 29.09.2017, 15:53 | Сообщение # 1
Гл. Модератор
Сообщений:1642
Награды: 7


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



Смотрим демо в песочнице

Код
<div class="fadein">
  <img src="ссылка">
  <img src="ссылка">
  <img src="ссылка"> // количество картинок не ограниченное
</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;  }
Прикрепления: 8438605.png(237Kb)


Нужна помощь от меня но увидели что нет на сайте?! Задавайте тогда тут (ВК)
Страна: (RU)
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » Смена изображений на CSS
Страница 1 из 11
Поиск: