Как сделать просвечивание через текст свечением, исходящим от курсора?

Question

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

Answer 1

как то так? но заранее говорю это очень сырая версия многое надо доработать с js не проблема но лень копаться в css свойствах :) кстати думаю в инете навалом готовых нормальных решений

let shineElem = document.createElement('span')
shineElem.classList.add('shine')

let hell = document.querySelector('.halloween')
let hellText = document.querySelector('.halloween__text')

let x = hellText.getBoundingClientRect().x
let y = hellText.getBoundingClientRect().y

hell.addEventListener('mousemove',e => {
  hell.append(shineElem)
  shineElem.style.left = e.x - 25 + 'px'
  shineElem.style.top = e.y - 25 + 'px'
})

.halloween{
    background-color: black;
    text-align: center;
    height: 200px;
    position: relative;
}

.halloween__text{
    transition: all .5s linear;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: inline-block;
    opacity: 0.04;
    color: white;
}

.shine{
    position: absolute;
    box-shadow: 100px -100px 80px rgba(255, 255, 255);
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

<div class="halloween"><h1 class="halloween__text">halloween</h1></div>

Answer 2

Исходя из описания, должно получиться следующее:

document.querySelector('.wrapper').addEventListener('mousemove', function(ev) {
  this.style.setProperty('--y', `${ev.pageY - this.clientHeight / 2}px`);
  this.style.setProperty('--x', `${ev.pageX - this.clientWidth / 2}px`);
});

body { margin: 0; height: 100vh; background-color: #000f; }

.wrapper {
  height: 100%; width: 100%;
  font: bold 72px/100vh Arial;
  text-align: center;
  color: #fff0; background-color: #ffff;
  background-image: radial-gradient(circle, #ff0f, #ff00 2em);
  background-position: var(--x, 0px) var(--y, 0px);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

<div class="wrapper">BACKLIGHT</div>

Для нескольких вложенных текстовых элементов:

document.querySelector('.wrapper').addEventListener('mousemove', function(ev) {
  this.style.setProperty('--y', `${ev.pageY - this.clientHeight / 2}px`);
  this.style.setProperty('--x', `${ev.pageX - this.clientWidth / 2}px`);
});

body { margin: 0; height: 100vh; background-color: #000f; overflow: hidden; }

.wrapper {
  height: 100%; width: 100%;
  color: #fff0; background-color: #ffff;
  background-image: radial-gradient(circle, #ff0f, #ff00 30vh);
  background-position: var(--x, 0px) var(--y, 0px);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
}

.title { font: bold 72px Arial; margin: .1em; }
.descr { font: bold 22px Arial; margin: .1em; }
.block { font: bold 48px Arial; }

<div class="wrapper">
<h3 class="title">BACKLIGHT</h3>
<p class="descr">Можно добавлять <i>разные</i> текстовые элементы,<br> в рамках элемента <span class="block">wrapper</span> </p>
</div>

БЛОГ НА HUSL

Как сделать просвечивание через текст свечением, исходящим от курсора?

Ответы (2 шт):