58 lines
1.3 KiB
Plaintext
58 lines
1.3 KiB
Plaintext
/* AI 悬浮按钮 — 忠于 H5 原型：渐变流动背景 + 机器人 SVG */
|
||
/* H5: 56px → 56×2×0.875 = 98rpx */
|
||
|
||
.ai-float-btn-container {
|
||
position: fixed;
|
||
right: 28rpx;
|
||
z-index: 100;
|
||
}
|
||
|
||
.ai-float-btn {
|
||
width: 98rpx;
|
||
height: 98rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
/* 渐变动画背景 — 忠于 H5 原型 */
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #667eea 100%);
|
||
background-size: 400% 400%;
|
||
animation: gradientShift 8s ease infinite;
|
||
box-shadow: 0 8rpx 40rpx rgba(102, 126, 234, 0.4);
|
||
}
|
||
|
||
.ai-float-btn:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
/* 高光叠加层 */
|
||
.ai-float-btn-highlight {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(145deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
|
||
border-radius: 50%;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 背景渐变流动动画 */
|
||
@keyframes gradientShift {
|
||
0% { background-position: 0% 50%; }
|
||
25% { background-position: 50% 100%; }
|
||
50% { background-position: 100% 50%; }
|
||
75% { background-position: 50% 0%; }
|
||
100% { background-position: 0% 50%; }
|
||
}
|
||
|
||
/* SVG 图标 H5: 30px → 52rpx */
|
||
.ai-icon-svg {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|