Жуткий эффект мерцания света для текста на CSS

Я решила, что вообще ничего не буду ждать. Ничего и никого. Мне и так хорошо. Без всех. Просто жить. Просто для себя. Просто в свое удовольствие. То, что суждено, придет само.

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

HTML

<h2>
  <span>There's</span>  
  <span class="light">light</span> 
  <span> even in</span> 
  <span>the darkest</span>  
  <span>places</span>
</h2>

CSS

body {
  background: #000;
  padding: 2rem;
}

h2 {
  font-family: 'Arial';
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 3rem;
  line-height: 0.75;
}

span {
  display: block;
}

span:not(.light) {
  opacity: 0;
  animation: flashText .5s ease-out alternate infinite;
}

span.light {
  position: relative;
  display: inline-block;
  
  &:before {
    position: absolute;
    left: 0;
    top: -10%;
    width: 100%;
    height: 120%;
    background: #fff;
    filter: blur(10px);
    content: "";
    opacity: 0;
    animation: flash .5s ease-out alternate infinite;
  }
}

@keyframes flash{
  to {
    opacity: 1;
  }
}

@keyframes flashText {
  to {
    opacity: 0.15;
  }
}