ZorNet.Ru — сайт для вебмастера » HTML и CSS » Слайдер с простой функцией анимации CSS3

Слайдер с простой функцией анимации CSS3

Слайдер с простой функцией анимации CSS3
Этот слайдер идет с оригинальной анимацией при замене изображений, где также имеет огромные стрелочки переключателей по сторонам на чистом CSS. Также нужно подчеркнуть, что этот слайд создан на чистом CSS, но не имеет адаптивности под разные размеры экрана на мобильные аппараты. Если вы знакомы, как все сделать на все аппараты, чтоб корректно выглядело, то думаю здесь будет не сложно, ведь вся структура изначально построена на чистой стилистике. Такой стиль можно наблюдать на разной тематической площадке, как на сайте или блоге, что при открытии наблюдать на главной страницы.

Этот стиль на слайдер изображений, которые своим функционалом поможет вам создавать оригинальную галерею тематических картинок с потрясающими эффектами, что заключаются переходами для вашего веб-сайта. Он также удобен для SEO, позволяя создавать семантическую разметку с настраиваемыми атрибутами, которые поисковые системы могут легко индексировать. Этот слайд также позволяет легко создавать оригинальные показы, что будут изначально доступны для гостей и пользователей. Имеется место под название каждого слайда, где можно вписать краткое описание, что для поисковых систем будет отличным показателем по ключевым словам.

Переключатели изображения:

Слайдер на CSS для сайта

Установка:

HTML

Код
<section id="pesekon_snimka_css">
<ul class="kalomeguss">
  <input type="radio" name="radio-btn" id="img-1" checked="">
  <li class="kalomegus-container">
  <div class="kalomegus">
  <img src="Ссылка на изображение №1">
  </div>
  <div class="nav">
  <label for="img-6" class="prev">‹</label>
  <label for="img-2" class="next">›</label>
  </div>
  </li>

  <input type="radio" name="radio-btn" id="img-2">
  <li class="kalomegus-container">
  <div class="kalomegus">
  <img src="Ссылка на изображение №2">
  </div>
  <div class="nav">
  <label for="img-1" class="prev">‹</label>
  <label for="img-3" class="next">›</label>
  </div>
  </li>

  <input type="radio" name="radio-btn" id="img-3">
  <li class="kalomegus-container">
  <div class="kalomegus">
  <img src="Ссылка на изображение №3">
  </div>
  <div class="nav">
  <label for="img-2" class="prev">‹</label>
  <label for="img-4" class="next">›</label>
  </div>
  </li>

  <input type="radio" name="radio-btn" id="img-4">
  <li class="kalomegus-container">
  <div class="kalomegus">
  <img src="Ссылка на изображение №4">
  </div>
  <div class="nav">
  <label for="img-3" class="prev">‹</label>
  <label for="img-5" class="next">›</label>
  </div>
  </li>

  <li class="nav-dots">
  <label for="img-1" class="nav-dot" id="img-dot-1"></label>
  <label for="img-2" class="nav-dot" id="img-dot-2"></label>
  <label for="img-3" class="nav-dot" id="img-dot-3"></label>
  <label for="img-4" class="nav-dot" id="img-dot-4"></label>
  </li>
</ul>
</section>

CSS

Код
#pesekon_snimka_css .kalomeguss{
padding:0;
width:609px;
height:420px;
display:block;
margin:0 auto;
position:relative}

#pesekon_snimka_css .kalomeguss *{
user-select:none;
-ms-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-webkit-touch-callout:none}

#pesekon_snimka_css .kalomeguss input{
display:none}

#pesekon_snimka_css .kalomegus-container{
display:block}

#pesekon_snimka_css .kalomegus{
top:0;
opacity:0;
width:609px;
height:420px;
display:block;
position:absolute;
transform:scale(0);
transition:all .7s ease-in-out}

#pesekon_snimka_css .kalomegus img{
width:100%;
height:100%}

#pesekon_snimka_css .nav label{
width:200px;
height:100%;
display:none;
position:absolute;
opacity:0;
z-index:9;
cursor:pointer;
transition:opacity .2s;
color:#FFF;
font-size:156pt;
text-align:center;
line-height:380px;
background-color:rgba(255,255,255,.3);
text-shadow:0 0 15px #777}

#pesekon_snimka_css .kalomegus:hover+.nav label{
opacity:.5}

#pesekon_snimka_css .nav label:hover{
opacity:1}

#pesekon_snimka_css .nav .next{
right:0}

#pesekon_snimka_css input:checked+.kalomegus-container .kalomegus{
opacity:1;
transform:scale(1);
transition:opacity 1s ease-in-out}

#pesekon_snimka_css input:checked+.kalomegus-container .nav label{
display:block}

#pesekon_snimka_css .nav-dots{
width:100%;
bottom:9px;
height:11px;
display:block;
position:absolute;
text-align:center}

#pesekon_snimka_css .nav-dots .nav-dot{
top:-5px;
width:11px;
height:11px;
margin:0 4px;
position:relative;
border-radius:100%;
display:inline-block;
background-color:rgba(0,0,0,.6)}

#pesekon_snimka_css .nav-dots .nav-dot:hover{
cursor:pointer;
background-color:rgba(0,0,0,.8)}

#pesekon_snimka_css input#img-1:checked~.nav-dots label#img-dot-1,#pesekon_snimka_css input#img-2:checked~.nav-dots label#img-dot-2,#pesekon_snimka_css input#img-3:checked~.nav-dots label#img-dot-3,#pesekon_snimka_css input#img-4:checked~.nav-dots label#img-dot-4,#pesekon_snimka_css input#img-5:checked~.nav-dots label#img-dot-5,#pesekon_snimka_css input#img-6:checked~.nav-dots label#img-dot-6{
background:rgba(0,0,0,.8)}

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

Демонстрация
2021-03-03 Загрузок: 2 Просмотров: 334 Комментарий: (0)

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

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

Оставь свой отзыв

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