Vision Reveal

在云境TS 中打开并复制 →

内容预览

Creative Studio Showcase *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } * { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } html, body { margin: 0; padding: 0; background: #E4E4E4; color: #F4F1E8; overflow-x: hidden; scroll-behavior: smooth; } /* ===== SPLASH ===== */ .splash { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9999; pointer-events: none; overflow: hidden; animation: splashHide 0.3s ease forwards; animation-delay: 1.35s; } .splash-row { display: flex; width: 100%; height: 50%; } .splash-box { width: 20%; height: 100%; background: #75C5DE; } .splash-row-top .splash-box { animation: splashTop 1s cubic-bezier(0.96,-0.02,0.38,1.01) forwards; } .splash-row-bottom .splash-box { animation: splashBottom 1s cubic-bezier(0.96,-0.02,0.38,1.01) forwards; } .splash-box:nth-child(1) { animation-delay: 0s; } .splash-box:nth-child(2) { animation-delay: 0.05s; } .splash-box:nth-child(3) { animation-delay: 0.1s; } .splash-box:nth-child(4) { animation-delay: 0.15s; } .splash-box:nth-child(5) { animation-delay: 0.2s; } @keyframes splashTop { from { transform: translateY(0%); } to { transform: translateY(-100%); } } @keyframes splashBottom { from { transform: translateY(0%); } to { transform: translateY(100%); } } @keyframes splashHide { to { opacity: 0; visibility: hidden; } } /* ===== HERO IMAGE ENTRANCE ===== */ @keyframes heroImageIn { from { opacity: 0; transform: scale(1.5) rotate(3deg); 

……（完整源码请在站内查看）