这是一款基于纯 CSS 三维变换与关键帧技术实现的九层文字带构成的旋转球形跑马灯。多层彩色文字沿不同纬度围成球体,整个文字组持续旋转,前后文字随视角产生交叠。页面提供暂停、慢速、反向和半球显示等开关,便于观察几何排布。字符是静态节点,不需要持续运行的 JavaScript,适合文字专题和视觉实验。
九层文字跑马灯有哪些可切换视图
九层文字共享一个旋转组。不同纬度和字号构成球面轮廓,组旋转时各层相对位置稳定。
字符保留正背面展示控制。可以决定是否显示后排文字,比较通透与实体感。
复选框直接改变动画状态。暂停、慢放、反向与半球显示由 CSS 选择器关联。
静态字形怎样组成旋转球面
每个字形都带有相位与分组信息,样式计算其球面位置和朝向,父组再执行旋转。中文替换同时更新显示字符和 data-char,避免伪元素仍读取旧字。字符越多,DOM 与绘制负担越大,适合围绕简短标语组织内容。
transform-style: preserve-3d;
球形字带的标语与相位如何修改
文字节点、纬度和颜色变量位于 index.html,球体大小、旋转周期、背面文字与半球规则在 style.css。替换标语时应保持字符数量和相位对应,或重新分配整条文字带的位置。
中文文字球的字数和浏览器适配问题
可以直接塞进一整段文章吗?
不适合。文字需要按字形分布在球面上,长段落会增加节点并降低可读性,建议使用短标语。
为什么旧浏览器显示不完整?
效果依赖三维变换、CSS 三角函数和较新选择器。建议在目标浏览器预览,必要时准备平面文字回退。
暂停后还能操作其他开关吗?
可以。暂停只影响动画播放,半球与背面显示仍由各自状态控制。
适合文字专题、品牌短标语和球面排字实验。下载后可查看球形文字环的完整结构与参数,按自己的内容继续调整。