» »

Эффект круговой волны кнопки на CSS

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

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

Рассмотрим пример:

Круглые волны с помощью CSS3

Установка:

HTML

Код
<div class="kruglaya-volna">
  <div class="konaso-dasuva">
  <div class="lasuteke-sturad">Смотри сюда</div>
  <span class="sunik"></span>
  <span class="sunik"></span>
  <span class="sunik"></span>
  <span class="sunik"></span>
  </div>
</div>

CSS

Код
.kruglaya-volna {
  position: relative;
  display: inline-block;
  z-index: 1000;
}
.kruglaya-volna .konaso-dasuva {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #216eb1;
  border: 8px solid #ccdeec;
  border-radius: 100%;
  height: 135px;
  width: 135px;
}
.kruglaya-volna .lasuteke-sturad {
  font-family: 'Roboto Condensed', Tahoma, sans-serif;
  color: #f9f8f6;
  font-size: 18px;  
}
.kruglaya-volna .sunik {
  border-radius: 50%;
  border: 4px solid #cce4f9;
  position: absolute;
  animation: radio 4s linear infinite;
  z-index: -1;
  pointer-events: none;
}
.kruglaya-volna .sunik:nth-of-type(2) {
  animation-delay: 1s;
}
.kruglaya-volna .sunik:nth-of-type(3) {
  animation-delay: 2s;
}
.kruglaya-volna .sunik:nth-of-type(4) {
  animation-delay: 3s;
}
.kruglaya-volna:hover .sunik {
  animation-play-state: paused;
}
@keyframes radio {
  0% {
  width: 0;
  height: 0;
  }
  30% {  
  opacity: 0.8;
  }
  80% {  
  opacity: 0.6;
  }
  100% {
  width: 1550px;
  height: 1550px;
  opacity: 0;
  }
}

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

Демонстрация
2019-10-18 Загрузок: 2 Просмотров: 259 Комментарий: (0)

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

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

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

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