Слайд-шоу - это когда картинки меняются сами. Тут уже идёт речь об анимации. В этой статье я покажу простой пример слайд-шоу на чистом HTML и CSS без использования скриптов.
Создаём папку slideshow, в ней создаём папку images и два файла index.html и style.css. Подготавливаем изображения, они должны быть все одинакового размера, в моём примере ширина изображений 900px, высота 500px.
Изображения помещаем в папку images.
В файле index.html пишем простую разметку нашего слайд-шоу 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 пишем стили:
- Определяем цвет общего фона.
background: #464c9b;
}
- Центрируем блок со слайдером и делаем отступ сверху 20 пикселей.
margin: 0 auto;
width: 900px;
overflow: hidden;
margin-top: 20px;
}
- Устанавливаем ключевые кадры анимации. В данном примере это затухание.
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; }
}
- Пишем стили для изображений.
Центрируем изображения.
position:absolute;
margin: 0 auto;
width: 900px;
overflow: hidden;
Делаем все изображения прозрачными. Непрозрачность будет появляться во время анимации.
Пишем имя анимации, которое будет связывать правило @keyframes с селектором.
Устанавливаем общее время анимации.
Делаем анимацию бесконечной.
- Устанавливаем время ожидания перед воспроизведением анимации для каждого изображения в отдельности.
.wrapper img:nth-child(2) { animation-delay: 5s; }
.wrapper img:nth-child(3) { animation-delay: 10s; }
.wrapper img:nth-child(4) { animation-delay: 15s; }
Скачать исходники.