Создание эффекта сканирующего света CSS и JavaScript

Быстрый ответ

Если ваша цель — создание эффекта подсветки в CSS, воспользуйтесь комбинацией свойств box-shadow, создающего эффект свечения, и animation, которым можно придать свечению пульсирующий характер. В качестве основы возьмите следующий код:

.glow {
  border-radius: 50%;  /* Формируем круг */
  background: gold;  /* Выбираем желаемый оттенок */
  box-shadow: 0 0 8px gold;  /* Создаем световой эффект */
  animation: pulsate 1s infinite alternate;  /* Задаем пульсацию светового эффекта */
}

@keyframes pulsate {
  to { box-shadow: 0 0 16px gold; }  /* Регулируем интенсивность свечения */
}

Меняя border-radius, вы сможете применить эффект подсветки к объектам различных форм.

Создание идеального светового эффекта

Подсветка — это не просто яркость. Это сочетание теней и движения. Придайте вашему CSS-коду больше реалистичности с помощью градиентов и эффектов динамического света.

Динамический градиент: Двигаемся вслед за курсором

Синхронизацию позиции градиента с движениями курсора можно осуществить при помощи JavaScript и CSS-переменных:

// Отслеживание движения курсора
document.onmousemove = (e) => {
  const x = e.clientX / window.innerWidth * 100;
  const y = e.clientY / window.innerHeight * 100;
  document.documentElement.style.setProperty('--posX', `${x}%`);
  document.documentElement.style.setProperty('--posY', `${y}%`);
};

CSS-класс элемента будет следующим:

.element {
  --posX: 50%; /* Инициализация переменных */
  --posY: 50%;
  
  background: radial-gradient(circle at var(--posX) var(--posY), white, transparent); /* Радиальный градиент, зависящий от положения курсора */
  transition: background-position 0.5s ease; /* Плавная анимация изменения позиции градиента */
}

Подробнее об этом расскажет наш спикер на видео

Эффект скрытого текста: Магия невидимого!

Создание элемента интриги доступно с применением эффекта скрытого текста при помощи -webkit-background-clip: text и прозрачного цвета текста:

.text-reveal {
  color: transparent;  /* Делаем текст невидимым */
  background: linear-gradient(#000, #000);  /* Создаем фон под текстом */
  -webkit-background-clip: text;  /* Применяем магию: фон в виде текста */
  background-clip: text;
}

Визуализация

Представим себе туманный вечер. Уличные фонари (+ ваш HTML элемент) зажжены и распространяют свет сквозь туман:

<div class="lamp"></div>

Чтобы имитировать свечение фонаря, используйте box-shadow:

.lamp {
  box-shadow: 0 0 30px 10px yellow;  /* Способствуем созданию иллюзии света */
}

Созависимость элементов:

🏙️  ...🌃  // Город погружен в сон, кроме зажженных уличных фонарей
   🌫️🌫️  // Все вокруг окутано густым туманом
💡🏙️💡  // Фонари, взыгрывая светом, оживляют картину благодаря магии CSS

Вы воплотили в реальность тайнственную картину ночного города при помощи CSS!

Продвинутые техники создания световых эффектов

Желаете придать вашему сайту больше блеска и сияния? Изучите следующие методы, чтобы привлекать внимание пользователей:

Интенсивность и визуальные акценты: Увеличение яркости света

Дополнительное сияние можно придать вашим элементам при помощи box-shadows. Использование clipPath поможет создать увлекательный эффект концентрации света:

.scan-effect {
  box-shadow: 0 0 15px 5px #fff;  /* Сохраняем и укрепляем эффект свечения */
  clip-path: circle(50% at var(--posX) var(--posY)); /* Фокусируем свет в заданной области */
}

Адаптивные световые эффекты

Для достижения прекрасной визуализации вашего светового эффекта в различных окружениях примените адаптивность. В этом помогут процентные значения и свойство transform: translate:

.scan-effect {
  width: 100%;  /* Свет полностью заполняет элемент */
  height: 100%;
  transform: translateX(var(--posX)) translateY(var(--posY));  /* Эффект плавного движения */
}

Использование анимаций

Вы можете обеспечить активацию CSS-анимаций в ответ на действия пользователя. На примере ниже, при клике на кнопку запускается анимация:

// Нажатие на кнопку активирует анимацию.
document.querySelector('.button').onclick = () => {
  document.querySelector('.element-to-animate').classList.add('scan-animation');
};

И соответствующий CSS:

.scan-animation {
  animation: scan 3s forwards; // Активация анимации
}

Полезные материалы

1. mix-blend-mode – CSS: Cascading Style Sheets | MDN — узнайте больше о режимах смешивания CSS.
2. box-shadow | CSS-Tricks – CSS-Tricks — изучите создание изящных световых эффектов с использованием box-shadow.
3. filter | CSS-Tricks – CSS-Tricks — расширьте свои знания в создании сложных световых эффектов.
4. Box Shadow CSS Generator | CSSmatic — генератор box-shadow облегчит создание идеальных теней.
5. CSS Псевдоэлементы — псевдоэлементы CSS позволят вам расширить возможности по созданию световых эффектов.