Веб-мастерская Ларисы ВоронинойСлайд-шоу HTML CSS.
WEB-мастерская Ларисы Ворониной logo

Слайд-шоу HTML CSS. Фев 2 2017


Слайд-шоу - это когда картинки меняются сами. Тут уже идёт речь об анимации.  В этой статье я покажу простой пример  слайд-шоу на чистом HTML и CSS без использования скриптов.

Создаём папку slideshow, в ней создаём папку images и два файла index.html и style.css. Подготавливаем изображения, они должны быть все одинакового размера, в моём примере ширина изображений 900px, высота 500px.

Изображения помещаем в папку images.

В файле index.html пишем простую разметку нашего слайд-шоу HTML.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <link rel="stylesheet" type="text/css" href="style.css" />
          <title>Слай-шоу HTML CSS</title>
     </head>
     <body>
          <div class="wrapper">
               <img src="images/img1.jpg">
               <img src="images/img2.jpg">
               <img src="images/img3.jpg">
               <img src="images/img4.jpg">
          </div>
     </body>
</html>

В файле style.css пишем стили:

  • Определяем цвет общего фона.
body {
background: #464c9b;
}
  • Центрируем блок со слайдером и делаем отступ сверху 20 пикселей.
.wrapper {
margin: 0 auto;
width: 900px;
overflow: hidden;
margin-top: 20px;
}
  • Устанавливаем ключевые кадры анимации. В данном примере это затухание.
@keyframes fade {
0%{ opacity: 0; }
10%{ opacity: 1; }
20%{ opacity: 1; }
30%{ opacity: 1; }
40%{ opacity: 0; }
50%{ opacity: 0; }
60%{ opacity: 0; }
70%{ opacity: 0; }
80%{ opacity: 0; }
90%{ opacity: 0;}
100% { opacity: 0; }
}
  • Пишем стили для изображений.

Центрируем изображения.

.wrapper img {
position:absolute;
margin: 0 auto;
width: 900px;
overflow: hidden;

Делаем все изображения прозрачными. Непрозрачность будет появляться во время анимации.

opacity:0;

Пишем имя анимации, которое будет связывать правило @keyframes  с селектором.

animation-name: fade;

Устанавливаем общее время анимации.

animation-duration: 20s;

Делаем анимацию бесконечной.

animation-iteration-count: infinite;
  • Устанавливаем время ожидания перед воспроизведением анимации для каждого изображения в отдельности.
.wrapper img:nth-child(1) { animation-delay: 0s; }
.wrapper img:nth-child(2) { animation-delay: 5s; }
.wrapper img:nth-child(3) { animation-delay: 10s; }
.wrapper img:nth-child(4) { animation-delay: 15s; }

Рейтинг@Mail.ru