前端代码：网站轮播切换/交互/悬停效果合集

全屏悬停变形滑块，卡片在 hover 时产生流体形变与分层文字动画，已本地化脚本/样式/字体与图片占位，适合科技、创意或招聘展示的炫酷首屏。

亮点卖点

• 悬停形变：Hover Morph 插件驱动，鼠标移入即触发形变与文字切换，动效高级。
• 波纹切换：利用 Revolution Slider 的帧动画与分层过渡，保持流畅细腻。
• 本地化依赖：jQuery、核心 rs6/rbtools、hovermorph/mousetrap、Three.js、normalize 均本地化，无外链。
• 中文文案 + 品牌露出：导航、按钮等已换成中文，右上角 KS 主题徽标可链接官网。

设计风格

• 深色背景 + 金色高光，突出图像与形变轮廓。
• 文字采用大写间距与粗细对比，强化职能/主题标签感。
• 圆形分页按钮与透明叠加，简洁不喧宾夺主。

适用场景

• 科技/创意品牌落地页、活动首屏、招聘岗位展示。
• 交互动效作品集、Demo 展示或演示幻灯。
• 需要悬停即可反馈、点击可切换的多卡片视觉模块。

使用方式

1. 直接打开 slider.html 预览（建议本地服务器以避免跨域）。
2. 替换素材：将 assets/*.jpg 换成你的图片；在 slider.html 中更新对应标题/标签文案。
3. 修改导航/按钮：在页头 nav 和层内文本替换为你的栏目名。
4. 调整品牌：brand-badge 文案/链接可改为自己的品牌与地址。

文件结构

• slider.html：页面结构、中文文案、品牌徽标与资源引用。
• css/rs6.css：主要样式与品牌徽标样式。
• js/：本地 jQuery、rbtools、rs6、hovermorph、mousetrap、Three.js。
• assets/：示例图片与其他资源。
• fonts/：图标字体（pe-icon-7-stroke、font-awesome）。
• slider-readable.html：便于阅读的备份版本，已对标签与 data-* 属性分行排版，方便查找修改。

自定义提示

• 想加/减幻灯：按现有 rs-slide 结构复制或删减，确保分页按钮数量同步。
• 想调动画节奏：修改 data-frame_* 属性的时间与缓动，或在 js/rs6.min.js 的配置中调整。
• 如需接入真实数据，可用后端/JS 模板生成 rs-slide 内容，再保留同样的层结构。

data-* 速查说明（Revolution Slider 机制）

Revolution Slider/rs6 会读取每层上的 data-* 属性来生成动画与交互，不能简单搬到外部 CSS，否则插件读不到配置。

• data-xy：定位与偏移（x/y、左上右下、响应式偏移）。
• data-text：文字样式（粗细、字号、行高、对齐等），多端值用逗号分隔。
• data-actions：交互事件绑定，例如 mouseenter/leave 触发帧切换、click 跳转到下一幻灯。
• data-frame_0/1/999/hover：入场/停留/出场/悬停帧，包含时间 sp、延迟 st、缓动 e、位置/透明度变化。
• data-padding、data-border：内边距与描边。
• data-msp、data-msalign：幻灯片切换时的对齐与移动速度。

统一调整的推荐方式

1. 在 slider-readable.html 中直接编辑对应层的 data-* 值（已分行，便于阅读）。
2. 若想集中管理视觉变量，可在 <style> 里定义 CSS 变量，再把变量值填入 data-text 等属性，如 data-text="c:var(--hero-color);fw:700;"。
3. JS 批量修改：可在页面底部添加脚本，利用 querySelectorAll('[data-text]') 等遍历并改写 dataset，但最终仍需写回到 data-* 供 rs6 读取。

建议搭配 AI 辅助理解：把关键段落复制给 AI，让它解释或生成你需要的变量/脚本模板，会更快更高效。