重点:完整的浮动元素全局控制字段,以及每项运动覆盖。
---
layout: home
hero:
name: "浮动元素"
text: "第 4 级"
tagline: "全局运动、密度、模糊和渐变调色板配置。"
floating:
enabled: true
opacity: 0.92
density: 14
blur: 2
gradients:
- "linear-gradient(120deg, rgba(15, 76, 154, 1) 0%, rgba(47, 111, 192, 1) 52%, rgba(106, 163, 232, 1) 100%)"
- "linear-gradient(120deg, rgba(13, 123, 102, 1) 0%, rgba(21, 148, 129, 1) 54%, rgba(67, 188, 160, 1) 100%)"
- "linear-gradient(120deg, rgba(138, 95, 26, 1) 0%, rgba(185, 131, 35, 1) 56%, rgba(226, 173, 75, 1) 100%)"
motion:
enabled: true
style: drift
durationMin: 10
durationMax: 24
drift: 42
items:
- type: text
text: "自适应对比度"
x: "18%"
y: "18%"
motionStyle: drift
driftX: 28
driftY: 14
duration: 14
- type: card
title: "控制面板"
description: "全局运动默认值 + 每项覆盖"
x: "70%"
y: "24%"
delay: 1.6
- type: code
code: "floating.motion.durationMin: 10"
x: "32%"
y: "76%"
- type: shape
shape: circle
x: "84%"
y: "62%"
size: "72px"
actions:
- theme: brand
text: "波浪第 4 级"
link: /zh-CN/hero/matrix/waves/level4OutlineColor
- theme: outline
text: "浮动元素 API"
link: /zh-CN/hero/AllConfig
---| 键 | 全部配置 |
|---|---|
hero.floating.opacity | |
hero.floating.density | |
hero.floating.blur | |
hero.floating.gradients | |
hero.floating.motion.* | |
hero.floating.items[].motionStyle | |
hero.floating.items[].driftX/driftY | |
hero.floating.items[].duration/delay |