» »

Слайдер на чистом CSS с плавным переходом

Слайдер на чистом CSS с плавным переходом

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

Это отлично проверенный обвод, где примерно идет пару пикселей, и под них тени выставлены, что на светлом фоне отлично видно будет. Как максимальная или минимальная высота, что не требуется, только в том случаи, если идет показ изображения, но поскольку слайдер может обрабатывать другие HTML файлы.

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

Здесь снимок, что был проверен на работоспособность.

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

Приступаем к установке:

HTML

Код
<div class="kersazukuveg">
  <div class="gukopes-nukazildsa">
  <div class="zorkilanum">
  <div class="mask">
  <ul>
  <li id="first" class="katampersavgun">
  <a href="#">
  <img src="http://zornet.ru/ABVUN/sarunolas/img_1.jpg" alt="Cougar"/>
  </a>
  <div class="tooltip">
  <h1>uCoz</h1>
  </div>
  </li>

  <li id="second" class="zaswrykiohds">
  <a href="http://zornet.ru">
  <img src="http://zornet.ru/ABVUN/sarunolas/img_2.jpg" alt="Скрипты для сайта"/>
  </a>
  <div class="tooltip">
  <h1>zornet.ru</h1>
  </div>
  </li>
   
  <li id="third" class="zotredsaxolpmeta">
  <a href="http://zornet.ru/load/145">
  <img src="http://zornet.ru/ABVUN/sarunolas/img_3.jpg" alt="Шаблоны для сайта"/>
  </a>
  <div class="tooltip">
  <h1>Шаблоны</h1>
  </div>
  </li>
   
  <li id="fourth" class="usadekilaseron">
  <a href="http://zornet.ru/load/81">
  <img src="http://zornet.ru/ABVUN/sarunolas/img_4.jpg" alt="Стилистика"/>
  </a>
  <div class="tooltip">
  <h1>Стили</h1>
  </div>
  </li>
   
  <li id="fifth" class="larakrofdangekim">
  <a href="http://zornet.ru/load/142">
  <img src="http://zornet.ru/ABVUN/sarunolas/img_5.jpg" alt="В категорий шаблоны для uCoz"/>
  </a>
  <div class="tooltip">
  <h1>css</h1>
  </div>
  </li>
  </ul>
  </div>
  <div class="progress-bar"></div>
  </div>
  </div>
</div>

CSS

Код
@keyframes cycle {
  0% { top:0px; }
  4% { top:0px; }  
  16% { top:0px; opacity:1; z-index:0; }  
  20% { top:325px; opacity:0; z-index:0; }  
  21% { top:-325px; opacity:0; z-index:-1; }
  92% { top:-325px; opacity:0; z-index:0; }
  96% { top:-325px; opacity:0; }
  100%{ top:0px; opacity:1; }  
}
@keyframes cycletwo {
  0% { top:-325px; opacity:0; }
  16% { top:-325px; opacity:0; }
  20% { top:0px; opacity:1; }
  24% { top:0px; opacity:1; }  
  36% { top:0px; opacity:1; z-index:0; }  
  40% { top:325px; opacity:0; z-index:0; }
  41% { top:-325px; opacity:0; z-index:-1; }  
  100%{ top:-325px; opacity:0; z-index:-1; }
}
@keyframes cyclethree {
  0% { top:-325px; opacity:0; }
  36% { top:-325px; opacity:0; }
  40% { top:0px; opacity:1; }
  44% { top:0px; opacity:1; }  
  56% { top:0px; opacity:1; }  
  60% { top:325px; opacity:0; z-index:0; }
  61% { top:-325px; opacity:0; z-index:-1; }  
  100%{ top:-325px; opacity:0; z-index:-1; }
}
@keyframes cyclefour {
  0% { top:-325px; opacity:0; }
  56% { top:-325px; opacity:0; }
  60% { top:0px; opacity:1; }
  64% { top:0px; opacity:1; }
  76% { top:0px; opacity:1; z-index:0; }
  80% { top:325px; opacity:0; z-index:0; }
  81% { top:-325px; opacity:0; z-index:-1; }
  100%{ top:-325px; opacity:0; z-index:-1; }
}
@keyframes cyclefive {
  0% { top:-325px; opacity:0; }
  76% { top:-325px; opacity:0; }
  80% { top:0px; opacity:1; }
  84% { top:0px; opacity:1; }
  96% { top:0px; opacity:1; z-index:0; }
  100%{ top:325px; opacity:0; z-index:0; }
}

@keyframes fullexpand {
  0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
  4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
  16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
  17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
  18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }  
}

html, body {
  background:#eaeaea;
  font-size:12px;
  font-family:"Open Sans", serif;
  min-width:960px;
  margin:0;
  padding:0;
  color:#aaa;
}

.content h1 {
  font-size:48px;
  color:#000;
  text-shadow:0px 1px 1px #f4f4f4;
  text-align:center;
  padding:60px 0 30px;  
}

.kersazukuveg {
  margin:0 auto;
  overflow:hidden;
  width:960px;
}

.gukopes-nukazildsa {
  width:100%;
  height:360px;
  margin:10px auto 0;
}

.zorkilanum {
  background:#000;
  border:5px solid #eaeaea;
  box-shadow:1px 1px 5px rgba(0,0,0,0.7);
  height:320px;
  width:680px;
  margin:40px auto 0;
  overflow:visible;
  position:relative;
}
.mask {
  overflow:hidden;
  height:320px;
}
.zorkilanum ul {
  margin:0;
  padding:0;
  position:relative;
}
.zorkilanum li {
  width:680px;
  height:320px;
  position:absolute;
  top:-325px;
  list-style:none;
}

.zorkilanum li.katampersavgun {
  animation:cycle 25s linear infinite;
}
.zorkilanum li.zaswrykiohds {
  animation:cycletwo 25s linear infinite;  
}
.zorkilanum li.zotredsaxolpmeta {
  animation:cyclethree 25s linear infinite;
}
.zorkilanum li.usadekilaseron {
  animation:cyclefour 25s linear infinite;  
}
.zorkilanum li.larakrofdangekim {
  animation:cyclefive 25s linear infinite;
}

.zorkilanum .tooltip {
  background:rgba(0,0,0,0.7);
  width:300px;
  height:60px;
  position:relative;
  bottom:75px;
  left:-320px;
  transition:all 0.3s ease-in-out;  
}
.zorkilanum .tooltip h1 {
  color:#fff;
  font-size:24px;
  font-weight:300;
  line-height:60px;
  padding:0 0 0 20px;
}
.zorkilanum li#first:hover .tooltip,  
.zorkilanum li#second:hover .tooltip,  
.zorkilanum li#third:hover .tooltip,  
.zorkilanum li#fourth:hover .tooltip,  
.zorkilanum li#fifth:hover .tooltip {
  left:0px;
}
.zorkilanum:hover li,  
.zorkilanum:hover .progress-bar {
  animation-play-state:paused;
}

.progress-bar {  
  position:relative;
  top:-5px;
  width:680px;  
  height:5px;
  background:#000;
  animation:fullexpand 25s ease-out infinite;
}

Здесь не нужно подключать jQuery, где также нет JavaScript и знаков изображений, которые ставят под скрипты. Это действительно быстрый и простой по своей работе и конструкций слайд шоу, что корректно отображается на обновленных браузерах.

Демонстрация
2018-06-05 Просмотров: 424 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar