这是一款基于GSAP、ScrollTrigger 与 CSS技术实现的图片球阵与漂浮卡片搜索首屏动画。中央图片网格被圆形遮罩收成球状，周围漂浮着几张错落卡片，一条搜索栏横跨画面。进入页面时，各层依次缩放出现，随后卡片轻轻上下浮动，提示文字不断打出与擦除。它包含鼠标视差、悬停放大、点击旋转和滚动扩散，适合灵感站、作品集和品牌展示入口。
图片球搜索首屏有哪些分层动画
开场按层次组织。球形区域、网格、搜索栏和外侧卡片分段进入，错峰顺序避免所有元素同时出现。
鼠标移动带动不同幅度。中央主体轻微偏移，周围卡片按各自强度跟随，形成前后层次。
点击和滚动都有反馈。卡片可旋转，球形网格可脉冲缩放，向下滚动时外围卡片继续向外扩散。
GSAP如何连接图片网格、打字与滚动
球形外观来自 CSS 裁切和图片网格，不是 WebGL 球体。GSAP 时间线负责进场与持续漂浮，ScrollTrigger 把滚动进度映射到卡片百分比位移。搜索提示由定时打字、擦除逻辑维护，更多按钮会触发一轮视觉反馈并切换提示词；页面并不执行真实搜索。
rotation: 360, duration: 200, repeat: -1,
搜索首屏的图片、提示词和视差如何修改
图片与浮动卡片结构在 index.html，本地图片放在 img；searchQueries 数组、入场顺序、视差强度和点击效果在 script.js。球形遮罩、搜索栏宽度、卡片位置和响应式规则在 style.css。若要接搜索业务，需将只读输入改为可编辑，并设计提交与结果展示。
图片搜索首屏的输入与设备适配问题
搜索框为什么不能输入？
当前输入框设置为 readonly，用来展示循环提示词和首屏交互。它没有搜索接口或结果页，接入业务时需要另外实现。
必须使用Three.js吗？
不需要。这里的球形来自二维图片网格和 CSS 遮罩，动画由 GSAP 完成，不包含三维模型或自由相机。
手机上可以展示吗？
页面有响应式布局，点击反馈可用，鼠标视差在触屏上不会保持相同表现。建议检查首屏高度、外围图片位置和提示文字长度。
适合品牌灵感入口、视觉导航和作品展示首屏。完整时间线、漂浮与滚动效果可下载查看。
