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