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

Эффект круговой волны кнопки на 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;
  }
}

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

Демонстрация

18 Октября 2019 Загрузок: 3 Просмотров: 1622 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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