Модальные окнаbrandinganimationoverlay
Entrance Splash
Вступительный приветственный экран с анимацией при первом входе на сайт.
Живое превью
Использование
Скопируйте и вставьте этот код в ваш React-компонент:
tsx
import { SplashIntroOverlay } from 'react-component-kit-ui/overlays';
<SplashIntroOverlay>Content</SplashIntroOverlay>Ручная установка
Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/SplashIntroOverlay.tsx + SplashIntroOverlay.css:
SplashIntroOverlay.tsx
'use client';
import LogoWithGalaxy from '../LogoWithGalaxy';
import './SplashIntroOverlay.css';
/** SplashIntroOverlay — ported from astro-component-kit. */
export interface SplashIntroOverlayProps {
}
export function SplashIntroOverlay({}: SplashIntroOverlayProps) {
return (
<>
<div className="splash" data-rk-ccfb24="">
<div className="logo-anim" data-rk-ccfb24="">
<LogoWithGalaxy size="large" />
</div>
</div>
</>
);
}
export default SplashIntroOverlay;SplashIntroOverlay.css
/* SplashIntroOverlay — ported from astro-component-kit (overlays/SplashIntroOverlay.astro) */
.splash:where([data-rk-ccfb24]) { position: fixed; inset: 0; background: #080b14; z-index: 9999; display: grid; place-items: center; animation: splash-intro-overlay-fade-out 1s forwards 2s; }
.logo-anim:where([data-rk-ccfb24]) { animation: splash-intro-overlay-scale-pulse 1.5s infinite linear; }
@keyframes splash-intro-overlay-fade-out { to { opacity: 0; pointer-events: none; } }
@keyframes splash-intro-overlay-scale-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }Краткая информация
- Категория
- Модальные окна
- Имя файла
SplashIntroOverlay.tsx- Зависимости
- Нет — чистый React + CSS
- Теги
- brandinganimationoverlay