Как добиться крутого неонового эффекта с помощью чистого CSS?

CSS

В последнее время я обратил внимание наCSS Animation Effects TutorialСерия, в которой представлено множество интересных анимаций CSS. Первый - крутой эффект неонового света, вот простая запись и поделимся идеей реализации.

Это эффект, который должен быть достигнут:

Видно, что при перемещении мыши в кнопку будет производиться неоновый эффект, при перемещении мыши из кнопки луч света будет двигаться по фиксированной траектории (периферия кнопки) .

Реализация неоновых огней

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

HTML:

 <div class="light">
    Neon Button
 </div>

CSS:

body {
 background: #050901;   
}
.light {
  width: fit-content;
  padding: 25px 30px;
  color: #03e9f4;
  font-size: 24px;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  cursor: pointer;
}
.light:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
}

Окончательный эффект выглядит следующим образом:

3.gif

Реализация движущегося луча

Хотя кажется, что вдоль края кнопки движется только один луч, на самом деле это суперпозиция четырех лучей, движущихся в разных направлениях. Направления их движения: слева направо, сверху вниз, справа налево и снизу вверх, как показано на следующем рисунке:

При этом луч и луч пересекаются, и если смотреть только на край кнопки, то похоже, что только один луч движется по часовой стрелке.

Ниже приведены несколько моментов, которые следует отметить в конкретной реализации:

  • Четыре луча соответствуютdiv.lightЧетыре дочерних элемента div, начальные позиции — крайняя левая, крайняя верхняя, крайняя правая и крайняя нижняя часть кнопки, и повторяют движение в фиксированном направлении.
  • Каждый луч очень мал по высоте или ширине (всего 2 пикселя) и имеет градиент от прозрачного до неонового, поэтому внешний вид будет иметь сходящийся эффект (т. е. он не будет выглядеть как полная линия).
  • Чтобы убедиться, что мы видим движение по часовой стрелке, движение четырех лучей на самом деле в порядке, сначала начинает двигаться луч над кнопкой,через некоторое время, движение луча справа,через некоторое время, движение луча внизу,через некоторое время, движение луча слева. Существует задержка в движении между лучом и лучом.В качестве примера возьмем луч вверху и справа.Если они начинают двигаться одновременно, потому что расстояние движения с правой стороны меньше, чем расстояние движения на верхней стороне, два луча упустят возможность пересечься, мы увидим сломанные, несвязные лучи. Поскольку расстояние перемещения правого луча относительно небольшое, чтобы верхний луч «догнал» его, мы должны позволить правому лучу «задержаться», поэтому нам нужно дать ему задержку анимации; аналогично остальные два луча тоже должны быть. Есть задержка анимации. Достаточно разницы примерно в 0,25 секунды между несколькими задержками анимации.
  • Достаточно просто показать световой луч на краю кнопки, так что дайтеdiv.lightустановить скрытое переполнение

код показывает, как показано ниже:

HTML:

<div class="light">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    Neon Button
</div>

CSS:

.light {
  position: relative;
  padding: 25px 30px;
  color: #03e9f4;
  font-size: 24px;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  cursor: pointer;
  overflow: hidden;
}
.light:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
}
.light div {
  position: absolute;
}
.light div:nth-child(1){
  width: 100%;
  height: 2px;
  top: 0;
  left: -100%;
  background: linear-gradient(to right,transparent,#03e9f4);
  animation: animate1 1s linear infinite;
}
.light div:nth-child(2){
  width: 2px;
  height: 100%;
  top: -100%;
  right: 0;
  background: linear-gradient(to bottom,transparent,#03e9f4);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}
.light div:nth-child(3){
  width: 100%;
  height: 2px;
  bottom: 0;
  right: -100%;
  background: linear-gradient(to left,transparent,#03e9f4);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}
.light div:nth-child(4){
  width: 2px;
  height: 100%;
  bottom: -100%;
  left: 0;
  background: linear-gradient(to top,transparent,#03e9f4);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}
@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}
@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}
@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}
@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

Это позволит добиться эффекта картинки в начале статьи.

Неоновые огни разных цветов

Что делать, если вы хотите эффект неонового света других цветов? Вам нужно снова изменить соответствующие цвета? На самом деле у нас есть более простой способ, который заключается в использованииfilter:hue-rotate(20deg)Разовая модификацияdiv.lightи оттенок/оттенок всех элементов внутри.

The hue-rotate() CSS function rotates the hue of an element and its contents.

Окончательный эффект выглядит следующим образом:

Категории