• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Анимированная галерея с эффектами в CSS (Красивый, потрясающих эффектов для изображений на HTML и CSS)
Анимированная галерея с эффектами в CSS
Kosten
Четверг, 20 Июня 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Отличное решение для сайтов с услугами, где слайдер идет автоматически, показывая слайд, который изначально по дизайну выстроен в форме круга. Что отличается от других, и такой формат можно видеть как на отдельной страницы, так и на главной, где выводится самая актуальная информация. Это простой и понятный способ добавить интересное обращение к любым веб-сайтам, основанным на портфолио и галерее.

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



HTML

Код
  <div class="container">
  <div id="galeri">
   <figure><img src="http://zornet.ru/_fr/64/2151771.jpg" alt="" width="220"></figure>
      <figure><img src="http://zornet.ru/_fr/64/3661643.jpg" alt="" width="220"></figure>
      <figure><img src="http://zornet.ru/_fr/64/9852391.jpg" alt="" width="220"></figure>
      <figure><img src="http://zornet.ru/_fr/64/7199084.jpg" alt="" width="220"></figure>
      <figure><img src="http://zornet.ru/_fr/64/1913335.jpg" alt="" width="220"></figure>
      <figure><img src="http://zornet.ru/_fr/64/5981224.jpg" alt="" width="220"></figure>
      <figure><img src="http://zornet.ru/_fr/64/9044800.jpg" alt="" width="220"></figure>
      <figure><img src="http://zornet.ru/_fr/64/7932342.jpg" alt="" width="220"></figure>
      <figure><img src="http://zornet.ru/_fr/64/8314102.jpg" alt="" width="220"></figure>
  </div>
    </div>

CSS

Код
body{
    min-height: 100%;
}
body{
    background-image: radial-gradient(mintcream 0%, lightgray 100%);
}
h1{
    display: table;
    margin: 5% auto 0;
    text-transform: uppercase;
    font-family: arial;
    font-size: 4em;
    font-weight: 400;

}
.container{
    margin: 4% auto;
    width: 210px;
    height: 140px;
    position: relative;
    perspective: 1000;
}
#galeri{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotation 20s infinite linear;
}
#galeri:hover{
    animation-play-state: paused;
}
#galeri figure{
    display: block;
    position: absolute;
    width: 186px;
    height: 116px;
    left: 10px;
    top: 10px;
    background: black;
    overflow: hidden;
    border: solid 5px black;
}
#galeri figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
#galeri figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#galeri figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#galeri figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#galeri figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#galeri figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#galeri figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#galeri figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#galeri figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}

img{
    -webkit-filter: grayscale(1);
    cursor: pointer;
    transition: all .5s ease;
}
img:hover{
    -webkit-filter: grayscale(0);
  transform: scale(1.2,1.2);
}

@keyframes rotation{
    from{
  transform: rotateY(0deg);
    }
    to{
  transform: rotateY(360deg);
    }
}  

Для простоты и простоты использование CSS в качестве основы делает все более привлекательным для просмотра. Независимо от того, реализуете ли вы конструкторские структуры, добавляете ли вы эффекты или анимации, они, скорее всего, более привлекательны и привлекательны для зрителей.

Демонстрация
Прикрепления: 4474234.png (121.4 Kb) · css-galeri.zip (3.5 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Анимированная галерея с эффектами в CSS (Красивый, потрясающих эффектов для изображений на HTML и CSS)
  • Страница 1 из 1
  • 1
Поиск: