## Как использовать

Наведите курсор на объекты для активации эффектов бликов. Некоторые эффекты работают автоматически.

### Блик при наведении

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

Наведи на меня
/* 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%; } }