设计亮点：美观与互动并存

• 沉浸式背景设计：采用渐变 SVG 背景图（header-bg.svg）作为基底，搭配主题化前景图，形成立体视觉效果，避免单调感；背景尺寸自适应调整（background-size: auto 622px），确保在不同屏幕下都能完整展示。
• 动态装饰元素：代码中嵌入了 9 个动态装饰组件（ind_quan0至ind_quan9），每个元素都有专属动画：有的会缩放跳动（toy动画），有的会 360° 旋转（zhuan动画），有的会上下 / 左右晃动（upAnimation/aroundAnimation）。这些微交互让顶部区域「活」了起来，自然吸引用户注意力。
• 核心信息突出：标题（ind_title）采用 40px 大字体，副标题（ind_subtitle）以浅色辅助说明，形成信息层级；底部按钮（common-button）用蓝色主调 + 阴影效果（box-shadow）突出，搭配悬停放大效果（hover状态），引导用户点击加入社群。

适配细节：兼顾多设备体验

• 屏幕宽度≤768px 时，自动缩减高度（从 624px 改为 300px），隐藏复杂装饰元素（ind_quan），避免拥挤；
• 标题字体缩小为适配尺寸，背景图自动调整比例，按钮放大便于触摸点击，确保移动端用户体验不受影响。

部署指南：3 步轻松上线

1. 进入 WordPress 后台，依次打开「外观」→「小工具」→「自定义 HTML」；
2. 将完整代码（含<style>和<div>结构）粘贴到 HTML 框中；
3. 推荐放置在「首页 - 顶部全宽度」区域，最后修改按钮跳转链接（代码中<a>标签的href属性，替换为你的群链接）。

适用场景：不止于「好看」

• 除了提升视觉体验，这款样式更适合「社群运营型网站」：通过顶部醒目的引导按钮，将访客直接转化为社群成员；动态效果减少用户跳出率，让网站第一屏更具记忆点。
• 如果你想让网站头部摆脱千篇一律的设计，同时为社群引流，这款代码值得一试 —— 简单部署，即可让页面顶部焕然一新。