+
+
+
Блик при наведении
+
+ Эффект скользящего блика, активируемый при наведении курсора.
+
+
Наведи на меня
+
+ /* 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%; } }
+
+
+