ZorNet.Ru — сайт для вебмастера » HTML и CSS » Слайдер затухания изображение на CSS3

Слайдер затухания изображение на CSS3

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

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

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

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

Приступаем к установке:

HTML

Код

CSS

Код

.konvemungan {
  max-width: 315px;
  height: 225px;
  margin: 35px auto;
  position: relative;
}
.gesalongemin1,.gesalongemin2,.gesalongemin3,.gesalongemin4,.gesalongemin5 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.gesalongemin1 {
  background: url(http://zornet.ru/_fr/72/9196661.jpg)no-repeat center;
  background-size: cover;
  animation:fade 7s infinite;
-webkit-animation:fade 7s infinite;

}
.gesalongemin2 {
  background: url(http://zornet.ru/_fr/72/2024564.jpg)no-repeat center;
  background-size: cover;
  animation:fade2 7s infinite;
-webkit-animation:fade2 7s infinite;
}
.gesalongemin3 {
  background: url(http://zornet.ru/_fr/72/5786249.jpg)no-repeat center;
  background-size: cover;
  animation:fade3 7s infinite;
-webkit-animation:fade3 7s infinite;
}
@keyframes fade
{
  0% {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0% {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0% {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

.mudes {
  border: 2px solid #f7f3f3;
  border-radius: 2px;
  box-shadow: 0px 0px 25px 5px rgba(121, 116, 116, 0.47), 0px 0px 23px 5px rgba(150, 143, 143, 0.28);
}

Здесь все сделано понятно по установке, и не нужно нажимать нигде для переключения слайдов, все автоматически. Вообще Мы будем использовать основной неуправляемый, но созданный вами список для вывода информации на слайдер.

Демонстрация

01 Декабря 2018 Загрузок: 1 Просмотров: 1476 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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