/* ============================================================ FOREAL 复瑞物业 · 网站开场动画样式 上传路径：/static/css/intro.css 引入方式：在页面 里加一行 说明：颜色已按官网主色固定（主橙 #f97316 / 琥珀 #f59e0b）， 白幕 + 透明 Logo + 橙色签名线 + slogan「契约 · 精致 · 共赢」 ============================================================ */ /* 开场遮罩：全屏盖住页面，点击可跳过 */ .intro { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; cursor: pointer; } /* 三条白色幕布（各占 1/3 高度，向右拉开露出真实页面） */ .intro .curtain { position: absolute; left: 0; top: 0; width: 100%; height: 33.34%; background: #fff; transform: translateX(0); transition: transform .7s cubic-bezier(.77, 0, .18, 1); } .intro .curtain:nth-child(4) { top: 33.33%; } .intro .curtain:nth-child(5) { top: 66.66%; } .intro .curtain.play { transform: translateX(101%); } /* Logo 组合：Logo + 橙色签名线 + slogan */ .intro-logo-wrap { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 2; text-align: center; opacity: 0; transition: opacity .55s ease-out .05s, transform .55s ease-out .05s; } .intro.play .intro-logo-wrap { opacity: 1; transform: translate(-50%, -50%); } .intro .intro-logo-wrap.out { opacity: 0; transform: translate(-50%, calc(-50% - 46px)); transition: opacity .5s ease-in, transform .5s ease-in; } .intro-logo { width: 320px; max-width: 62vw; height: auto; display: block; } /* 橙色签名线：从左侧画出 */ .intro-line { width: 128px; height: 3px; margin: 22px auto 18px; background: linear-gradient(90deg, #f97316, #f59e0b); transform: scaleX(0); transform-origin: left center; transition: transform .5s ease .4s; } .intro.play .intro-line { transform: scaleX(1); } /* slogan：契约 · 精致 · 共赢 */ .intro-slogan { color: #f97316; font-size: 15px; letter-spacing: .5em; margin-right: -.5em; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .5s ease .8s, transform .5s ease .8s; } .intro.play .intro-slogan { opacity: 1; transform: none; } /* 底部"轻触屏幕继续"提示 */ .intro .next { position: absolute; bottom: 5vh; left: 0; width: 100%; text-align: center; z-index: 3; color: #f97316; font-size: 13px; letter-spacing: .35em; margin-right: -.35em; opacity: 0; transition: opacity .3s; } .intro.ready .next { opacity: .85; animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: .95; } } /* 无障碍：系统关闭动画时直接跳过开场 */ @media (prefers-reduced-motion: reduce) { .intro { display: none; } }