Главная » 2013 » Май » 13 » Слайдер CSS3
20:17
Слайдер CSS3
Преимущество данного слайдра в том что он использует только CSS3.

Ставим следующий код там, где хотим видеть слайдер:

Код
Преимущество данного слайдра в том что он использует только CSS3.<br><br><br><div class="slides">
  <ul> <!-- Слайды -->
  <li><img src="http://art.ucoz.ae/_ph/2/2/613247373.jpg" alt="image01">
  <div>Из всех искусств для нас важнейшим является - Живопись</div>
  </li>
  <li><img src="http://art.ucoz.ae/_ph/2/2/611401478.jpg" alt="image02">
  <div>Рекомендуется размещать изображения картин без рам.</div>
  </li>
  <li><img src="http://www.art-888.ru/_ph/6/2/164396736.jpg" alt="image03">
  <div>Материалы взяты из открытых источников</div>
  </li>
  <li><img src="http://art.ucoz.ae/_ph/2/2/860051315.jpg" alt="image04">
  <div>На сайте вы можете ознакомиться с работами художников.</div>
  </li>
  </ul>
  </div>


Следующий код ставим в свой css:

Код
/* Слайдер */  
  .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:16px;  
  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;  
  }
Категория: HTML CSS | Просмотров: 839 | Добавил: ваня | Теги: слайдер | Рейтинг: 1.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]