ZorNet.Ru — сайт для вебмастера » HTML и CSS » Пульсирующий эффект круга с помощью CSS

Пульсирующий эффект круга с помощью CSS

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

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

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

Так был проверен материал на работоспособность:

Приступаем к установке:

HTML

Код

<ul class="katlesgu_zornatges">
<li><a href="#">ZorNet.Ru</a></li>
<li><a href="#">Дизайн</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Скрипты</a></li>
<li><a href="#">Шаблоны</a></li>
</ul>

CSS

Код

ul.katlesgu_zornatges{
  list-style: none;
}

ul.katlesgu_zornatges li{
  display: inline;
}

ul.katlesgu_zornatges a{
  position: relative;
  display: inline-block;
  color: black;
  text-decoration: none;
  margin: 8px 17px;
  text-transform: uppercase;
  font-family: 'Raleway', sans-serif;
  font-size: 19px;
  letter-spacing: 2px;
  border-bottom: 2px solid transparent;
}

ul.katlesgu_zornatges a:hover, ul.katlesgu_zornatges a:focus{
  outline: none;
  border-bottom: 1px solid #f7f3f3;
}

ul.katlesgu_zornatges a::before, ul.katlesgu_zornatges a:after{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 53px;
  height: 53px;
  border: 12px double rgba(19, 18, 18, 0.18);
  border-radius: 50%;
  content: '';
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
  -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
  transform: translateX(-50%) translateY(-50%) scale(0.2);
}

ul.katlesgu_zornatges a:after{
  width: 57px;
  height: 57px;
  border-width: 5px;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
  -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
  transform: translateX(-50%) translateY(-50%) scale(0.8);
}

ul.katlesgu_zornatges a:hover:before, ul.katlesgu_zornatges a:hover:after{
  -webkit-animation: pulsate 1.3s infinite;
  -moz-animation: pulsate 1.3s infinite;
  -ms-animation: pulsate 1.3s infinite;
  animation: pulsate 1.3s infinite;
}

@-webkit-keyframes pulsate{

  30%{
  opacity: 1;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
  }

  100%{
  opacity: 0.3;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
  }

}

@-moz-keyframes pulsate{

  30%{
  opacity: 1;
  -moz-transform: translateX(-50%) translateY(-50%) scale(1);
  }

  100%{
  opacity: 0.3;
  -moz-transform: translateX(-50%) translateY(-50%) scale(0.5);
  }

}

@-ms-keyframes pulsate{

  30%{
  opacity: 1;
  -ms-transform: translateX(-50%) translateY(-50%) scale(1);
  }

  100%{
  opacity: 0.3;
  -ms-transform: translateX(-50%) translateY(-50%) scale(0.5);
  }

}

@-keyframes pulsate{

  30%{
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
  }

  100%{
  opacity: 0.3;
  transform: translateX(-50%) translateY(-50%) scale(0.5);
  }

}

Этот эффект будет работать в IE10, но и безусловно на всех обновленных или современных браузерах, как Firefox и Chrome, но за исключением Safari. Так как этому браузеру в настоящее время не удается оживить псевдоэлементы.

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

27 Августа 2018 Просмотров: 2237 Комментариев: (0)

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

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

Kosten

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