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

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


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


Установка:

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;
  }
}

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