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

Смена изображений по времени на чистом CSS

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

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

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

Установка:

HTML

Код

CSS

Код

#smena_kanpo_taymeru {
position:relative;
height:325px;
width:43px;
margin:0 auto;
}

#smena_kanpo_taymeru img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

#smena_kanpo_taymeru {
position:relative;
height:325px;
width:43px;
margin:0 auto;
}

#smena_kanpo_taymeru img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

@-webkit-keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

@-moz-keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

@-o-keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

@keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#smena_kanpo_taymeru img.vesan {
  -webkit-animation-name: cf3FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 5s;
  -webkit-animation-direction: alternate;

  -moz-animation-name: cf3FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 5s;
  -moz-animation-direction: alternate;

  -o-animation-name: cf3FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 5s;
  -o-animation-direction: alternate;

  animation-name: cf3FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

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

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

23 Августа 2021 Загрузок: 1 Просмотров: 1593 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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