ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивые блоки из фигур с анимацией CSS

Красивые блоки из фигур с анимацией CSS

Красивые блоки из фигур с анимацией CSS
Рассмотрим оригинальный вариант с блоками, что идут с красивой анимацией на чистом CSS, где появляется возможность содержать описание или данные. Также присутствует оформления блоков, которые могут содержать различные формы, где одну из них мы здесь как раз разместим. Ведь по умолчанию мы наблюдаем несколько фигур, а точнее 2 треугольника, что по центру идет горизонтальное табло, что выставлено под различную и тематическую информацию.

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

Как пример:

По умолчанию или с открытием страницы.

БЛОКИ ИЗ ФИГУР НА ЧИСТОМ CSS

Этот вид преобразился в тот момент, когда навели курсор.

Анимационные блоки для сайтов

Установка:

HTML

Код
<div class="oformleniye_blokov">
  <div class="akmatsuva-1"></div>
  <div class="akmatsuva-2"></div>
  <div class="akmatsuva-txt">
  <h3>ZorNet.Ru — сайт для вебмастера</h3>
  <p>Интересные решения для вебмастера в создание и продвижение сайтов</p>  
  </div>
</div>

CSS

Код
.oformleniye_blokov {
  margin: 20px auto;
  padding: 50px 0;
  position: relative;
  max-width: 640px;
}
.oformleniye_blokov .akmatsuva-1,  
.oformleniye_blokov .akmatsuva-2,  
.oformleniye_blokov .akmatsuva-1:after,
.oformleniye_blokov .akmatsuva-2:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.oformleniye_blokov .akmatsuva-1,  
.oformleniye_blokov .akmatsuva-2 {
  filter: drop-shadow(2px 6px 6px rgba(0, 0, 0, 0.4));
}
.oformleniye_blokov .akmatsuva-1:after {  
  clip-path: polygon(0 0, 40% 0, 20% 100%, 20% 100%);
  content: "";
  transition: all .5s ease-in-out;
  background: #337AB7;
}

.oformleniye_blokov:hover .akmatsuva-1:after {
  clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);  
}  
.oformleniye_blokov .akmatsuva-2:after {
  clip-path: polygon(80% 0, 100% 100%, 60% 100%, 80% 0);
  content: "";
  transition: all .5s ease-in-out;  
  background: #BFE2FF;
}
.oformleniye_blokov:hover .akmatsuva-2:after {
  clip-path: polygon(100% 0, 100% 100%, 40% 100%, 60% 0);
}  
.oformleniye_blokov .akmatsuva-txt {
  position: relative;
  text-align: center;
  z-index: 1;
  padding: 20px;
  margin: 0 50px;
  left: 0;
  background: #FFF;
  box-shadow: 2px 12px 15px rgba(0, 0, 0, 0.4);  
  transition: all .5s ease-in-out;  
}
.oformleniye_blokov .akmatsuva-txt h3 {  
  text-transform: uppercase;
  color: #337AB7;
  font-weight: bold;
  font-family: Verdana, sans-serif;
  font-size: 20px;  
  margin: 6px 0;
}
.oformleniye_blokov .akmatsuva-txt p {  
  font-family: Verdana, sans-serif;
  font-size: 16px;  
  margin: 6px 0;
}
@media (max-width: 540px) {
  .oformleniye_blokov .akmatsuva-txt h3 {  
  font-size: 18px;  
  }
  .oformleniye_blokov .akmatsuva-txt p {  
  font-size: 14px;  
  }
}
@media (max-width: 400px) {
  .oformleniye_blokov .akmatsuva-txt h3 {  
  font-size: 16px;  
  }
  .oformleniye_blokov .akmatsuva-txt p {  
  font-size: 13px;  
  }
}

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

Демонстрация
Автор: atuin.ru
2020-12-31 Загрузок: 3 Просмотров: 298 Комментарий: (1)

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

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

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

Комментарий: 1
Kosten
Kosten 2020-12-31 15:231
+1
Остальные вариаций таких блоков можно посмотреть в этом материале, как блоки из фигур треугольника на чистом CSS с разной трансформацией.
avatar