SnippetUI
← Back to snippets

Карточка с неоновым свечением

Это интерактивный компонент пользовательского интерфейса карты, в котором при наведении курсора край карты загорается как неоновый свет, а прожектор перемещается в зависимости от положения мыши.

HTMLCSSJavaScript

Предварительный просмотр

Три карты выделяются на темном фоне, а при наведении на них активируется эффект неонового свечения и прожектора.

⚡

Lightning Fast

Мгновенная загрузка благодаря пограничному кэшированию.

🛡️

Secure by Design

Безопасно с нулевым доверием.

📊

Deep Analytics

Аналитика в реальном времени.

Варианты использования и функции

  • Игры/панели управления/цифровые продукты: подходят для сайтов с темной тематикой.

  • Переменные CSS плюс JavaScript: простая реализация обновления переменных --mx / --my с помощью JavaScript.

  • Управляйте цветом каждой карточки с помощью переменных CSS: легко меняйте цвет излучения с помощью переменной --glow.

##Точки дизайна и UX

  1. Управляйте положением «radial-gradient» с помощью мыши: добейтесь направленности прожектора, указав положение с помощью переменной CSS вместо «background-position».

  2. Переход непрозрачность: 0 → 0,6: свечение становится ярче, поэтому наведение становится естественным и плавным.

  3. translateY(-8px) подъем: эффект плавания карточек подчеркивает интерактивность.

Как настроить

Чтобы изменить цвет свечения, просто переопределите переменную --glow:


/* розовый акцент */

.neon-card { --glow: #ec4899; }



/* голубой акцент */

.neon-card { --glow: #06b6d4; }

Код реализации

<div class="neon-cards-grid">

<div class="neon-card neon-card-1">

  <div class="neon-card-content">

    <div class="neon-card-icon">⚡</div>

    <h3 class="neon-card-title">Lightning Fast</h3>

    <p class="neon-card-desc">Мгновенная загрузка благодаря пограничному кэшированию.</p>

  </div>

</div>

<!-- Аналогичная структура для других карт. -->

</div>



<style>
/* Детали такие же, как CSS в предварительной версии. */

.neon-cards-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 2rem;

}



.neon-card {

--glow: #6366f1;

position: relative;

background: #111;

border-radius: 16px;

padding: 2px;

cursor: pointer;

transition: transform 0.3s ease;

overflow: hidden;

}



.neon-card::before {

content: "";

position: absolute;

inset: 0;

background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 40%);

opacity: 0;

transition: opacity 0.3s ease;

}



.neon-card:hover {

transform: translateY(-8px);

}

.neon-card:hover::before {

opacity: 0.6;

}



.neon-card-content {

position: relative;

background: #111;

border-radius: 14px;

padding: 2rem;

height: 100%;

z-index: 1;

}



.neon-card-1 { --glow: #ec4899; }

.neon-card-2 { --glow: #06b6d4; }

.neon-card-3 { --glow: #8b5cf6; }
</style>



<script>

(function() {

document.querySelectorAll('.neon-card').forEach(function(card) {

  card.addEventListener('mousemove', function(e) {

    var rect = card.getBoundingClientRect();

    card.style.setProperty('--mx', ((e.clientX-rect.left)/rect.width*100)+'%');

    card.style.setProperty('--my', ((e.clientY-rect.top)/rect.height*100)+'%');

  });

});

})();

</script>

Статус совместимости браузера

| Браузер | Статус совместимости |

|--------|-------|

| Хром 49+ | ✅ Полностью совместим |

| Firefox 31+ | ✅ Полностью совместим |

| Сафари 9.1+ | ✅ Совместимость |

| Край 79+ | ✅ Полностью совместим |