ZorNet.Ru — сайт для вебмастера » HTML и CSS » Плавная анимация для слайдера на CSS

Плавная анимация для слайдера на CSS

Оригинальная иллюстрация для смены изображение для слайдера, которая работает только в автоматическом режиме по смене картинки при помощи CSS. Такой стиль карусели можно предпринять на любом тематическом сайте, ведь смены картинки происходит в анимации, а точнее это плавное появление следующего кадра. Что-то похоже на баннеры, которые располагаются на улицах города, что также показывают снимок, и с красивым переходом закрывают его, где автоматом появляется следующий.

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

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

Приступаем:

HTML

Код

CSS

Код

.aperiences-marelining {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /*animation*/

  animation: slideShow 24s linear infinite 0s;
  -o-animation: slideShow 24s linear infinite 0s;
  -moz-animation: slideShow 24s linear infinite 0s;
  -webkit-animation: slideShow 24s linear infinite 0s;
}

.evalua1 {
  opacity: 1;
  background: url(http://zornet.ru/_fr/74/1833125.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.evalua2 {
  animation-delay: 6s;
  -o-animation-delay: 6s;
  -moz--animation-delay: 6s;
  -webkit-animation-delay: 6s;
  background: url(http://zornet.ru/_fr/74/6127287.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.evalua3 {
  animation-delay: 12s;
  -o-animation-delay: 12s;
  -moz--animation-delay: 12s;
  -webkit-animation-delay: 12s;
  background: url(http://zornet.ru/_fr/74/9761118.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.evalua4 {
  animation-delay: 18s;
  -o-animation-delay: 18s;
  -moz--animation-delay: 18s;
  -webkit-animation-delay: 18s;
  background: url(http://zornet.ru/_fr/74/1968796.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@keyframes
slideShow { 0% {
  opacity: 0;
  transform:scale(1);
  -ms-transform:scale(1);
}
  5% {
  opacity: 1
}
  25% {
  opacity: 1;
}
  30% {
  opacity: 0;
  transform:scale(1.1);
  -ms-transform:scale(1.1);
}
  100% {
  opacity: 0;
  transform:scale(1);
  -ms-transformm:scale(1);
}
}

@-o-keyframes
slideShow { 0% {
  opacity: 0;
  -o-transform:scale(1);
}
  5% {
  opacity: 1
}
  25% {
  opacity: 1;
}
  30% {
  opacity: 0;
  -o-transform:scale(1.1);
}
  100% {
  opacity: 0;
  -o-transformm:scale(1);
}
}

@-moz-keyframes
slideShow { 0% {
  opacity: 0;
  -moz-transform:scale(1);
}
  5% {
  opacity: 1
}
  25% {
  opacity: 1;
}
  30% {
  opacity: 0;
  -moz-transform:scale(1.1);
}
  100% {
  opacity: 0;
  -moz-transformm:scale(1);
}
}

@-webkit-keyframes
slideShow { 0% {
  opacity: 0;
  -webkit-transform:scale(1);
}
  5% {
  opacity: 1
}
  25% {
  opacity: 1;
}
  30% {
  opacity: 0;
  -webkit-transform:scale(1.1);
}
  100% {
  opacity: 0;
  -webkit-transformm:scale(1);
}
}

Отлично смотрится как на самом большом мониторе, и корректно выводит изображение на мобильные аппараты, так как в стилистике автоматически установлено 100%, что дает рисунку смотреться в любом ракурсе и размера.

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

10 Июня 2019 Загрузок: 1 Просмотров: 1128 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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