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

Эффект вспышки рассеивания по клику CSS

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

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

Установка:

HTML

Код

<nav id="krasivaya_animatsiya">
<a href="/" title="Сайт zornet.ru">Главная</a>
<a href="/" title="Общение на сайте">Форум</a>
</nav>

CSS

Код

#krasivaya_animatsiya { margin: 0 25px; flex: 1 auto; white-space: nowrap; text-align: left; cursor: default; }
  #krasivaya_animatsiya > a {
  text-decoration: none !important;
  display: inline-block;
  color: #f8f8f8;
  position: relative;
  z-index: 2;
  padding: 10px 3%;
  opacity: .8;
  }

  #krasivaya_animatsiya > a:after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  margin: -5px 0 0 -5px;
  width: 10px; height: 10px;
  border-radius: 100%;
  background-color: #fff;
  overflow: hidden;
  opacity: 0;
  }
  @-webkit-keyframes sun {
  0% { margin: -5px 0 0 -5px; width: 10px; height: 10px; opacity: 0; }
  50% { margin: -50px 0 0 -50px; width: 100px; height: 100px; opacity: .15; }
  100% { margin: -80px 0 0 -80px; width: 160px; height: 160px; opacity: 0; }
  }
  @keyframes sun {
  0% { margin: -5px 0 0 -5px; width: 10px; height: 10px; opacity: 0; }
  50% { margin: -50px 0 0 -50px; width: 100px; height: 100px; opacity: .15; }
  100% { margin: -80px 0 0 -80px; width: 160px; height: 160px; opacity: 0; }
  }

  #krasivaya_animatsiya > a:hover { z-index: 1; opacity: 1; }
  #krasivaya_animatsiya > a:hover:after {
  -webkit-animation: sun .3s ease;
  animation: sun .3s ease;
  }

  #krasivaya_animatsiya > a.active { cursor: default; opacity: 1; }
  #krasivaya_animatsiya > a.active:before {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background-color: #fff;
  }
  #krasivaya_animatsiya > a.active:after { display: none; }

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

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

06 Августа 2023 Загрузок: 4 Просмотров: 2526 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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