Слайдер на чистом CSS3

В этой статье мы сделаем удобный для настройки слайдер на чистом CSS3 без использования JavaScript и jQuery. В нем мы применим эффект затухания между слайдами, так же сделаем возможность добавление описание для каждого слайда, к тексту описания мы тоже применим интересный эфект. Слайды будут переключаться автоматически с помощью анимаций CSS3. Разметка HTML очень простая.
				
					<div class="slides">
<ul> <!-- Слайды -->
<li><img decoding="async" src="images/pic1.jpg" alt="image01" />
<div>Описание #1</div>
</li>
<li><img decoding="async" src="images/pic2.jpg" alt="image02" />
<div>Описание #2</div>
</li>
<li><img decoding="async" src="images/pic3.jpg" alt="image03" />
<div>Описание #3</div>
</li>
<li><img decoding="async" src="images/pic4.jpg" alt="image04" />
<div>Описание #4</div>
</li>
</ul>
</div>
				
			
Для слайдера используются анимации CSS3 anim_slides и anim_titles. Первая применяется для отдельных слайдов, вторая — для текста описания. Для описания также изменяется положение и прозрачность.
				
					/* Слайдер */
.slides {
height:300px;
margin:50px auto;
overflow:hidden;
position:relative;
width:900px;
}
.slides ul {
list-style:none;
position:relative;
}
 
/* Кадры анимации #anim_slides */
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
 
.slides ul li {
opacity:0;
position:absolute;
top:0;
 
/* анимация css3 */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
 
-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
 
/* Задержки css3 */
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
.slides ul li img {
display:block;
}
 
/* Кадры анимации #anim_titles */
@-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
 
.slides ul li div {
background-color:#000000;
border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px #FFFFFF inset;
color:#FFFFFF;
font-size:26px;
left:10%;
margin:0 auto;
padding:20px;
position:absolute;
top:50%;
width:200px;
 
/* Анимация css3 */
-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
 
-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
				
			
Свежие записи
Команда MD

Команда md позволяет создавать каталог или промежуточные каталоги в указанном

Web-Дизайн
help2site
Всплывающие подписи изображений

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

Web-Дизайн
help2site
PHP if-else. Условия в PHP.

В прошлый раз я писал о существующих типах операторов в PHP. Этот пост начинает серию связанных заметок об управляющих структурах (условия, циклы и т.д.) в PHP.

Windows
help2site
Как отключить стандартный брандмауэр Windows XP

У windows xp существует свой собственный фаервол. Кого-то он вполне устраивает, но из-за своей назойливости и навсегда стабильной работы, он не устраивает большинство пользователей. Чтобы

Web-Дизайн
help2site
Подборка полезных плагинов для WordPress

Оглавление Плагины для WordPress, которые пригодятся в первую очередь В этом пункте подборка базовых плагинов которые я  устанавливаю на каждый новый сайт под управлением WordPress.  FD Feedburner

iOS
help2site
Полный обзор Ipad 3

Сегодня я хочу поговорить о долгожданном Ipad 3. В настоящее время насчитывается около 60 миллионов владельцев по всему миру. Айпад 3-го поколения стал популярным в начале 2011

Оборудование
help2site
Что такое блок питания компьютера?

Блок питания компьютера — что это? Блок питания компьютера это энергетический центр, именно он питает электричеством все комплектующие компьютера, и позволяет ему работать. Это в