GQLite 动感按钮使用指南

使用方法

1. 引入CSS文件

在HTML文件的<head>部分引入相应的CSS文件：

<!-- 引入主页按钮样式 -->
<link rel="stylesheet" href="/public/static/css/dynamicbutton/index-cn-poster.css">
<link rel="stylesheet" href="/public/static/css/dynamicbutton/index-en-poster.css">

<!-- 引入关注按钮样式 -->
<link rel="stylesheet" href="/public/static/css/dynamicbutton/follow-cn.css">
<link rel="stylesheet" href="/public/static/css/dynamicbutton/follow-en.css">

<!-- 引入方向按钮样式 -->
<link rel="stylesheet" href="/public/static/css/dynamicbutton/up.css">
<link rel="stylesheet" href="/public/static/css/dynamicbutton/down.css">
<link rel="stylesheet" href="/public/static/css/dynamicbutton/left.css">
<link rel="stylesheet" href="/public/static/css/dynamicbutton/right.css">

<!-- 引入功能按钮样式 -->
<link rel="stylesheet" href="/public/static/css/dynamicbutton/confirm.css">
<link rel="stylesheet" href="/public/static/css/dynamicbutton/Cancel.css">
<link rel="stylesheet" href="/public/static/css/dynamicbutton/return.css">

<!-- 引入操作按钮样式 -->
<link rel="stylesheet" href="/public/static/css/dynamicbutton/reset.css">
<link rel="stylesheet" href="/public/static/css/dynamicbutton/start.css">
<link rel="stylesheet" href="/public/static/css/dynamicbutton/end.css">

<!-- 引入游戏圆环按钮样式 -->
<link rel="stylesheet" href="/public/static/css/dynamicbutton/RingGameUpDownLeftRight.css">

2. 添加按钮HTML代码

在页面中添加按钮元素：

<!-- 中文主页按钮 -->
<button class="dynamic-button-cn">
    <span>主页</span>
</button>

<!-- 英文Index按钮 -->
<button class="dynamic-button-en">
    <span>Index</span>
</button>

<!-- 中文关注按钮 -->
<button class="follow-button-cn">
    <span>关注</span>
</button>

<!-- 英文Follow按钮 -->
<button class="follow-button-en">
    <span>Follow</span>
</button>

<!-- 方向按钮 -->
<!-- 向上按钮 -->
<button class="direction-button-up">
    <span>Up</span>
</button>

<!-- 向下按钮 -->
<button class="direction-button-down">
    <span>Down</span>
</button>

<!-- 向左按钮 -->
<button class="direction-button-left">
    <span>Left</span>
</button>

<!-- 向右按钮 -->
<button class="direction-button-right">
    <span>Right</span>
</button>

<!-- 功能按钮 -->
<!-- 确认按钮 -->
<button class="confirm-button">
    <span>Confirm</span>
</button>

<!-- 取消按钮 -->
<button class="cancel-button">
    <span>Cancel</span>
</button>

<!-- 返回按钮 -->
<button class="return-button">
    <span>Return</span>
</button>

<!-- 操作按钮 -->
<!-- 重置按钮 -->
<button class="reset-button">
    <span>Reset</span>
</button>

<!-- 开始按钮 -->
<button class="start-button">
    <span>Start</span>
</button>

<!-- 结束按钮 -->
<button class="end-button">
    <span>End</span>
</button>

<!-- 游戏圆环按钮 -->
<div class="game-ring-container">
    <div class="game-ring-glow"></div>
    <div class="game-ring">
        <!-- 中心按钮 -->
        <div class="game-ring-center"></div>
        
        <!-- 方向按钮 -->
        <button class="game-ring-direction game-ring-up">
            ↑
        </button>
        <button class="game-ring-direction game-ring-down">
            ↓
        </button>
        <button class="game-ring-direction game-ring-left">
            ←
        </button>
        <button class="game-ring-direction game-ring-right">
            →
        </button>
    </div>
</div>

设计特点

这两款动感按钮基于海报风格设计，融合了大胆的色彩、鲜明的对比和动感的动画效果，具有以下特点：

主页按钮特点：
鲜明的色彩对比 - 中文按钮采用红色背景，英文按钮采用蓝色背景
粗体边框和阴影效果 - 3像素黑色边框搭配5像素阴影，创造立体感
独特的旋转角度 - 中文按钮轻微左倾，英文按钮轻微右倾
星星装饰元素 - 中文按钮右上角有五角星，英文按钮左上角有四角星
内部纹理效果 - 使用repeating-linear-gradient创建精细的纹理背景
动态效果 - 包含振动、抖动和旋转等多种动画
关注按钮特点：
按钮采用圆角设计，创造友好的视觉感受
英文Follow按钮采用Twitter蓝（#1DA1F2），中文关注按钮采用红色（#FF0000）
内部发光效果 - 悬停时显示水平扫描的发光效果
点击波纹动画 - 点击时产生轻微的放大缩小效果
关注状态切换 - 支持点击后切换为已关注状态（灰色背景）
中文关注按钮包含特殊的五角星装饰元素
两款按钮均支持响应式设计，在不同屏幕尺寸下自动调整样式
方向按钮特点：
每个方向按钮采用独特的颜色 - 上：绿色(#27ae60)，下：橙色(#f39c12)，左：蓝色(#3498db)，右：紫色(#9b59b6)
按钮悬停时会向对应方向轻微移动，增强方向感
内置方向指示器 - 悬停时显示对应方向的箭头符号
内部水平/垂直发光扫描效果，根据方向不同而变化
点击时的波纹效果，增强用户交互体验
操作按钮特点：
每个操作按钮采用独特的颜色 - 重置：橙色(#f39c12)，开始：绿色(#27ae60)，结束：紫色(#9b59b6)
按钮采用圆角设计，提供舒适的视觉体验
内置功能图标 - 悬停时显示对应功能的图标（重置：↺，开始：▶，结束：■）
内部水平发光扫描效果，增强视觉吸引力
点击时的波纹动画效果，提供即时反馈
悬停时按钮轻微上浮并显示图标，增强交互性
所有操作按钮均支持响应式设计，在不同屏幕尺寸下自动调整样式
所有方向按钮均支持响应式设计，在不同屏幕尺寸下自动调整样式
功能按钮特点：
确认按钮采用红色背景(#e74c3c)，提供明确的视觉提示
取消按钮采用灰色背景(#95a5a6)，表示中性操作
返回按钮采用蓝色背景(#3498db)，传达导航和返回含义
三个按钮均使用圆角设计(border-radius: 30px)，创造友好的视觉感受
悬停时按钮轻微上浮2px，并增强阴影效果
每个按钮都有独特的图标指示：确认(✓)、取消(✕)、返回(←)
图标在悬停时才显示，提供微妙的交互反馈
点击时产生轻微的放大缩小波纹动画
所有功能按钮均支持响应式设计，在不同屏幕尺寸下自动调整样式
游戏圆环按钮特点：
金色主题设计 - 采用金色渐变(#e6c346 到 #f5d75e)，营造游戏控制器的质感
圆环形状结构 - 外部圆环直径200px，内部中心按钮80px，比例协调
精致的格子纹理 - 使用CSS渐变创建内部菱形格子图案
四个方向按钮 - 分别位于圆环的上下左右四个位置，带有箭头标识
中心确认按钮 - 位于圆环中央，可作为确认或选择功能
整体发光效果 - 圆环周围有柔和的金色光晕
悬停时按钮放大 - 方向按钮悬停时轻微放大并显示更强的发光效果
点击波纹动画 - 按钮点击时有缩放的波纹动画
完全响应式设计 - 在不同屏幕尺寸下自动调整大小和布局

按钮对比

主页按钮对比

特性	中文主页按钮	英文Index按钮
CSS类名	`dynamic-button-cn`	`dynamic-button-en`
背景颜色	红色 (#FF0000)	蓝色 (#0066CC)
初始旋转角度	-1度	1度
装饰元素	右上角五角星 (★)	左上角四角星 (☆)
渐变角度	45度	-45度
振动动画时长	5秒	6秒
抖动动画时长	0.5秒	0.4秒
旋转动画时长	3秒	2.5秒

关注按钮对比

特性	中文关注按钮	英文Follow按钮
CSS类名	`follow-button-cn`	`follow-button-en`
背景颜色	红色 (#FF0000)	Twitter蓝 (#1DA1F2)
已关注状态颜色	深红色 (#8E0000)	灰色 (#657786)
形状	圆角矩形 (border-radius: 25px)	圆角矩形 (border-radius: 25px)
装饰元素	五角星 (★) - 悬停时显示	无额外装饰元素
字体	ZCOOL KuaiLe, ZCOOL QingKe HuangYou	Fredoka One, Poppins
点击动画	follow-ripple-cn (0.6秒)	follow-ripple (0.6秒)

方向按钮对比

特性	向上按钮	向下按钮	向左按钮	向右按钮
CSS类名	`direction-button-up`	`direction-button-down`	`direction-button-left`	`direction-button-right`
背景颜色	绿色 (#27ae60)	橙色 (#f39c12)	蓝色 (#3498db)	紫色 (#9b59b6)
悬停移动方向	上移 2px	下移 2px	左移 2px	右移 2px
方向指示器	↑ - 悬停时显示	↓ - 悬停时显示	← - 悬停时显示	→ - 悬停时显示
发光扫描方向	垂直 (从上到下)	垂直 (从下到上)	水平 (从左到右)	水平 (从右到左)
点击动画	direction-up-ripple (0.6秒)	direction-down-ripple (0.6秒)	direction-left-ripple (0.6秒)	direction-right-ripple (0.6秒)

功能按钮对比

特性	确认按钮	取消按钮	返回按钮
CSS类名	`confirm-button`	`cancel-button`	`return-button`
背景颜色	红色 (#e74c3c)	灰色 (#95a5a6)	蓝色 (#3498db)
边框颜色	深红色 (#c0392b)	深灰色 (#7f8c8d)	深蓝色 (#2980b9)
图标	✓ - 对勾	✕ - 叉号	← - 左箭头
图标位置	右侧	右侧	左侧
点击动画	confirm-ripple (0.6秒)	cancel-ripple (0.6秒)	return-ripple (0.6秒)
圆角半径	30px	30px	30px

交互效果说明

主页按钮交互效果

默认状态

按钮默认带有轻微的振动效果（button-vibrate或button-vibrate-en动画），创造生动的视觉感受。

悬停效果

当鼠标悬停在按钮上时，会触发以下变化：

按钮旋转角度变为0度，同时轻微放大至1.05倍
文字开始快速抖动（button-shake或button-shake-en动画）
文字阴影增强，从2像素增加到3像素
边框阴影增强，从5像素增加到7像素
装饰星星开始旋转（button-spin或button-spin-en动画）

点击效果

当点击按钮时，按钮会：

向右下方移动5像素
恢复到原始大小
阴影效果消失，创造按下的物理反馈

关注按钮交互效果

默认状态

按钮默认状态下无动画效果，保持简洁明了的外观。

悬停效果

当鼠标悬停在按钮上时，会触发以下变化：

按钮轻微上移2像素
阴影效果增强，从4像素增加到6像素
出现发光的水平扫描效果
文字轻微放大至1.05倍
中文关注按钮右侧出现旋转的五角星装饰

点击效果

当点击按钮时，按钮会：

轻微下移2像素
阴影效果缩小，从6像素减少到2像素
触发轻微的放大缩小波纹动画
可以通过JavaScript添加following类来切换到已关注状态

方向按钮交互效果

默认状态

按钮默认状态下无动画效果，保持简洁明了的外观。

悬停效果

当鼠标悬停在按钮上时，会触发以下变化：

按钮向对应方向轻微移动2像素（上/下/左/右）
阴影效果增强，从4像素增加到6像素
出现发光的扫描效果，方向与按钮指示方向一致
文字轻微放大至1.05倍
显示方向指示箭头（↑/↓/←/→）

点击效果

当点击按钮时，按钮会：

向对应方向移动4像素（比悬停效果更明显）
阴影效果缩小，从6像素减少到2像素
触发轻微的放大缩小波纹动画
可以通过JavaScript添加animate类来触发点击动画

功能按钮交互效果

确认/取消/返回按钮交互效果

默认状态

按钮默认状态下无动画效果，保持简洁明了的外观。

悬停效果

当鼠标悬停在按钮上时，会触发以下变化：

按钮轻微上浮2px
阴影效果增强，从4像素增加到6像素
出现发光的水平扫描效果
文字轻微放大至1.05倍
显示对应的图标（确认按钮显示✓，取消按钮显示✕，返回按钮显示←）

点击效果

当点击按钮时，按钮会：

轻微下移2px
阴影效果缩小，从6像素减少到2像素
触发轻微的放大缩小波纹动画
可以通过JavaScript添加animate类来触发点击动画

响应式设计

所有按钮都包含完整的响应式设计，在不同屏幕尺寸下会自动调整样式：

主页按钮响应式设计

大屏幕（1024px以上）

字体大小：1.5rem
内边距：12px 24px
边框：3像素
阴影：5像素

中等屏幕（768px-1024px）

字体大小：1.2-1.3rem
内边距：8-10px 16-20px
边框：2像素
阴影：3-4像素
文字阴影缩小
装饰星星缩小

小屏幕（480px以下）

字体大小：1rem
内边距：6px 12px
边框：1.5像素
阴影：2像素
移除内部纹理效果以提升性能
装饰星星进一步缩小

关注按钮响应式设计

大屏幕（1024px以上）

字体大小：1.1rem
内边距：10px 20px
边框：2像素
阴影：4像素
完整显示装饰元素和内部发光效果

中等屏幕（768px-1024px）

字体大小：0.9-1rem
内边距：7-8px 14-16px
边框：1.5像素
阴影：3-4像素
中文按钮装饰元素缩小

小屏幕（480px以下）

字体大小：0.85rem
内边距：6px 12px
边框：1.5像素
阴影：2像素
移除内部发光效果以提升性能
移除装饰元素

方向按钮响应式设计

大屏幕（1024px以上）

字体大小：1rem
内边距：10px 15px
边框：2像素
阴影：4像素
完整显示方向指示器和内部发光效果

中等屏幕（768px-1024px）

字体大小：0.9rem
内边距：8px 12px
边框：1.5像素
阴影：3-4像素
方向指示器缩小

小屏幕（480px以下）

字体大小：0.75rem
内边距：6px 8px
边框：1.5像素
阴影：2像素
移除内部发光效果以提升性能
移除方向指示器

GQLite 动感按钮使用指南

按钮示例

关注按钮示例

方向按钮示例

功能按钮示例

操作按钮示例

游戏圆环按钮示例

使用方法

1. 引入CSS文件

2. 添加按钮HTML代码

设计特点

按钮对比

主页按钮对比

关注按钮对比

方向按钮对比

功能按钮对比

交互效果说明

主页按钮交互效果

默认状态

悬停效果

点击效果

关注按钮交互效果

默认状态

悬停效果

点击效果

方向按钮交互效果

默认状态

悬停效果

点击效果

功能按钮交互效果

确认/取消/返回按钮交互效果

默认状态

悬停效果

点击效果

响应式设计

主页按钮响应式设计

大屏幕（1024px以上）

中等屏幕（768px-1024px）

小屏幕（480px以下）

关注按钮响应式设计

大屏幕（1024px以上）

中等屏幕（768px-1024px）

小屏幕（480px以下）

方向按钮响应式设计

大屏幕（1024px以上）

中等屏幕（768px-1024px）

小屏幕（480px以下）