• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Эффекты смены изображений на чистом CSS (Создание эффекта на 2 изображение посменно на HTML + CSS)
Эффекты смены изображений на чистом CSS
Kosten
Дата: Суббота, 2020-08-01, 05:10 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29329
Награды: 62


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

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



1. Вариант: Падение картинки сверху

HTML

Код
<div class="padeniya_pictures">
  <div class="drawing-0">
    <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-1.jpg" />
  </div>
  <div class="drawing-1">
    <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-1.jpg" />
  </div>
  <div class="drawing-2">
    <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-2.jpg" />
  </div>
</div>

CSS

Код
.padeniya_pictures {
  max-width: 380px;
  width: 100%;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
}
.padeniya_pictures img {
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
}
.padeniya_pictures .drawing-0 {
  position: relative;
  z-index: -2;
}
.padeniya_pictures .drawing-1 {
  position: absolute;
  top: -100%;
  animation: fromtop 10s linear 5s infinite;
}
.padeniya_pictures .drawing-2 {
  position: absolute;
  top: -100%;
  animation: fromtop 10s linear infinite;
}
@keyframes fromtop {
  0% {
    top: -100%;
  }
  4% {
    top: 0;
  }
  5% {
    top: -20px;
  }
  6% {
    top: 0;
  }
  49.99999% {
    top: 0;
    z-index: 1;
  }
  50% {
    top: 0;
    z-index: -1;
  }
  100% {
    z-index: -1;
    top: 0;
  }
}

На этом установка завершена.

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

Второй эффект: Поворот картинки с прозрачностью

HTML

Код
<div class="povusavaya-kartinku">
  <div class="snimok-1">
    <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-1.jpg" />
  </div>
  <div class="snimok-2">
    <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-2.jpg" />
  </div>
</div>

CSS

Код
.povusavaya-kartinku {
  max-width: 380px;
  width: 100%;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
}
.povusavaya-kartinku img {
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
}
.povusavaya-kartinku .snimok-1 {
  position: relative;
  animation: rotate 10s linear 5s infinite;
}
.povusavaya-kartinku .snimok-2 {
  position: absolute;
  top: 0;
  animation: rotate 10s linear infinite;
}
@keyframes rotate {
  0% {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
  40% {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
  49.99999% {
    transform: rotate(45deg) scale(3);
    opacity: 0;
    z-index: 1;
  }
  50% {
    transform: rotate(0) scale(1);
    opacity: 0;
    z-index: -1;
  }
  100% {
    opacity: 1;
    transform: rotate(0) scale(1);
    z-index: -1;
  }
}

Установочный процесс завершен.

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

Третий вариант: Увеличение изображение при смене

HTML

Код
<div class="uvelicena-uzobravena">
  <div class="pesoned-1">
    <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-1.jpg" />
  </div>
  <div class="pesoned-2">
    <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-2.jpg" />
  </div>
</div>

CSS

Код
.uvelicena-uzobravena {
  max-width: 380px;
  width: 100%;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
}
.uvelicena-uzobravena img {
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
}
.uvelicena-uzobravena .pesoned-1 {
  position: relative;
  animation: scale 10s linear 5s infinite;
}
.uvelicena-uzobravena .pesoned-2 {
  position: absolute;
  top: 0;
  animation: scale 10s linear infinite;
}
@keyframes scale {
  0% {
    transform: scale(0);
  }
  20% {
    transform: scale(1);
  }
  49.99999% {
    transform: scale(1);
    z-index: 1;
  }
  50% {
    transform: scale(1);
    z-index: -1;
  }
  100% {
    transform: scale(1);
    z-index: -1;
  }
}

Установочный процесс завершен.

Демонстрация
Прикрепления: 7271739.jpg(32.0 Kb) · images.rar(6.4 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2020-08-01, 05:31 | Сообщение 2
Оффлайн
Администраторы
Сообщений:29329
Награды: 62


Красивая исполненная анимация изображений на чистом CSS

Эффект смены картинок при горизонтальное вращение

Для вертикального нужно заменить rotateY на rotateX



HTML

Код
<div class="krasivaya-animatsiya">  
    <div class="dsagan-1">
  <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-1.jpg" />
    </div>
    <div class="dsagan-2">
  <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-2.jpg" />
    </div>
</div>

CSS

Код
.krasivaya-animatsiya {
    max-width: 380px;
    width: 100%;
    margin: 20px auto;
    position: relative;
}
.krasivaya-animatsiya img {
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.krasivaya-animatsiya .dsagan-1 {
    position: relative;
    animation: rotateY1 10s linear infinite;
    backface-visibility: hidden;
}
.krasivaya-animatsiya .dsagan-2 {
    position: absolute;
    top: 0;
    animation: rotateY2 10s linear infinite;
    backface-visibility: hidden;
}
@keyframes rotateY1 {
    0% {
  transform: rotateY(-180deg);
    }
    40% {
  transform: rotateY(-180deg);
    }    
    50% {
  transform: rotateY(0);
    }
    90% {
  transform: rotateY(0);
    }    
    100% {
  transform: rotateY(180deg);
    }
}    
@keyframes rotateY2 {
    0% {
  transform: rotateY(0);
    }
    40% {
  transform: rotateY(0);
    }
    50% {
  transform: rotateY(180deg);
    }    
    90% {
  transform: rotateY(180deg);
    }    
    100% {
  transform: rotateY(360deg);
    }
}

На этом вся установка.

Демонстрация
Прикрепления: 8801221.jpg(25.0 Kb) · animatsiya-kart.zip(2.7 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2020-08-01, 05:49 | Сообщение 3
Оффлайн
Администраторы
Сообщений:29329
Награды: 62


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

Здесь применен фильтр с прозрачностью



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

HTML

Код
<div class="elamenuga-vusukas">  
    <div class="sepunkas-1">
  <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-1.jpg" />
    </div>
    <div class="sepunkas-2">
  <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-2.jpg" />
    </div>
</div>

CSS

Код
.elamenuga-vusukas {
    max-width: 380px;
    width: 100%;
    margin: 20px auto;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.elamenuga-vusukas img {
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.elamenuga-vusukas .sepunkas-1 {
    position: relative;
    animation: brightness 10s linear 5s infinite;
}
.elamenuga-vusukas .sepunkas-2 {
    position: absolute;
    top: 0;
    animation: brightness 10s linear infinite;
}
@keyframes brightness {
    0% {
  opacity: 1;
    }
    54% {
  filter: none;
    }    
    58% {
  opacity: 1;
    }  
    59.99999% {
  filter: brightness(10);
  z-index: 1;
    }   
    60% {
  opacity: 0;
  z-index: -1;
    }  
}

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

Демонстрация
Прикрепления: 2017396.jpg(31.5 Kb) · photo-container.zip(2.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Эффекты смены изображений на чистом CSS (Создание эффекта на 2 изображение посменно на HTML + CSS)
  • Страница 1 из 1
  • 1
Поиск: