这是一款基于GSS 场景描述与浏览器三维渲染技术实现的内嵌旋转星系背景的按钮。深色页面中央是一枚小型胶囊按钮,背景里有明亮星核和向外展开的螺旋星点,文字叠在场景上方。GSS 以接近样式表的方式描述几何、材质和动画,再由嵌入组件渲染。适合科技感入口与视觉按钮实验。
星系按钮的场景与文字如何叠放
场景真正嵌入按钮。星点与星核属于独立三维场景,外部仍使用普通按钮元素。
星点按序号生成双臂。半径、角度、大小和色相随序号变化,并叠加少量随机扰动。
泛光强化发亮层次。发光材质与 bloom 配合,让小尺寸按钮也能保留中心亮度。
GSS序号计算怎样生成螺旋星臂
脚本创建 text/gss 类型的场景源码,并放入 gss-scene。组容器负责缓慢旋转,星点用序号计算角度与半径,材质颜色从暖色向冷色变化。它并不是普通 CSS 渐变背景,嵌入运行库和三维绘制依然是显示所必需的。
sphere.star * 60;
星核按钮的材质、星点和跳转从哪里调整
星点数量、场景相机和材质参数在 script.js 的 gss 字符串,按钮形状、文字与悬停样式在 style.css,跳转地址在 index.html。调整像素比或泛光前,应在目标设备检查清晰度与运行负担。
GSS按钮嵌入与实例数量问题
可以只复制按钮CSS就使用吗?
不够。场景需要 gss-scene 组件、运行库和场景描述,相关依赖已本地保存。
点击后会播放新的动画吗?
当前点击执行页面跳转,星系本身持续播放。若要改为开关或弹窗,应替换按钮事件。
适合大量重复放在页面中吗?
每个场景都有渲染成本,大量实例应先测试。多个入口可以考虑共用场景或准备静态版本。
适合科技主题入口、创意按钮和微型三维场景展示。下载后可查看星系按钮的完整结构与参数,按自己的内容继续调整。