Три карты выделяются на темном фоне, а при наведении на них активируется эффект неонового свечения и прожектора.
Мгновенная загрузка благодаря пограничному кэшированию.
Безопасно с нулевым доверием.
Аналитика в реальном времени.
Игры/панели управления/цифровые продукты: подходят для сайтов с темной тематикой.
Переменные CSS плюс JavaScript: простая реализация обновления переменных --mx / --my с помощью JavaScript.
Управляйте цветом каждой карточки с помощью переменных CSS: легко меняйте цвет излучения с помощью переменной --glow.
##Точки дизайна и UX
Управляйте положением «radial-gradient» с помощью мыши: добейтесь направленности прожектора, указав положение с помощью переменной CSS вместо «background-position».
Переход непрозрачность: 0 → 0,6: свечение становится ярче, поэтому наведение становится естественным и плавным.
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+ | ✅ Полностью совместим |