Блик при наведении
Эффект скользящего блика, активируемый при наведении курсора.
Наведи на меня
/* CSS код */ .object:hover::before { content: ''; position:
absolute; top: 0; left: -100%; width: 50%; height: 100%; background:
linear-gradient( 90deg, transparent, rgba(255,255,255,0.4),
transparent ); animation: shine 0.8s ease; } @keyframes shine { 0% {
left: -100%; } 100% { left: 100%; } }
Периодические блики
Автоматические повторяющиеся блики без взаимодействия.
Автоматический эффект
/* CSS код */ .object::before { content: ''; position: absolute;
top: 0; left: -100%; width: 50%; height: 100%; background:
linear-gradient( 90deg, transparent, rgba(255,255,255,0.3),
transparent ); animation: periodicShine 3s infinite; } @keyframes
periodicShine { 0%, 100% { left: -100%; } 50% { left: 100%; } }
Тонкий эффект с radial-gradient
Плавное изменение положения светового пятна при наведении.
Наведи на меня
/* CSS код */ .object { background: radial-gradient( circle at 30%
30%, rgba(255,255,255,0.2) 0%, transparent 50% ), #2c3e50;
transition: all 0.5s ease; } .object:hover { background:
radial-gradient( circle at 70% 70%, rgba(255,255,255,0.3) 0%,
transparent 50% ), #2c3e50; }
JavaScript контроль
Эффекты, управляемые JavaScript (блик + пульсация).
Наведи для блика
// JavaScript код object.addEventListener('mouseenter', () => {
object.classList.add('shining'); });
object.addEventListener('mouseleave', () => {
object.classList.remove('shining'); }); // Периодические пульсации
setInterval(() => { object.classList.add('pulse-glow');
setTimeout(() => { object.classList.remove('pulse-glow'); }, 1000);
}, 5000);
Блик для кнопки
Эффект диагонального блика, идеально подходящий для кнопок.
Наведи на меня
/* CSS код */ .button::after { content: ''; position: absolute; top:
-50%; left: -50%; width: 200%; height: 200%; background:
rgba(255,255,255,0.1); transform: rotate(45deg); transition: all
0.5s ease; opacity: 0; } .button:hover::after { opacity: 1;
transform: rotate(45deg) translate(50%, 50%); }
Множественные блики
Два независимых блика с разной скоростью и задержкой.
Автоматический эффект
/* CSS код */ .object::before, .object::after { content: '';
position: absolute; top: 0; left: -100%; width: 30%; height: 100%;
background: linear-gradient( 90deg, transparent,
rgba(255,255,255,0.4), transparent ); animation: multipleShine 4s
infinite; } .object::after { animation-delay: 1s; width: 20%; }
@keyframes multipleShine { 0%, 100% { left: -100%; } 50% { left:
100%; } }