关于如何构建响应式、自适应且易于访问的 3D 游戏菜单的基础知识。
在这篇博文中，我想分享一下如何构建 3D 游戏菜单组件。试用演示。
如果你更喜欢视频，可以参阅此博文的 YouTube 版本：
概览
视频游戏通常采用动画和 3D 空间形式，为用户提供创意十足的与众不同的菜单。在新的 AR/VR 游戏中，此功能很受欢迎，它可以让菜单看起来像在太空中漂浮。今天，我们将重现此效果的基本组成部分，但增添了自适应配色方案的亮点，并为喜欢减少动态的用户提供一些调整。
HTML
游戏菜单是按钮列表。若要在 HTML 中呈现此字段，最好如下所示：
<ul class="threeD-button-set">
<li><button>New Game</button></li>
<li><button>Continue</button></li>
<li><button>Online</button></li>
<li><button>Settings</button></li>
<li><button>Quit</button></li>
</ul>
按钮列表可以轻松地向屏幕阅读器技术读出按钮，并且无需 JavaScript 或 CSS 即可运行。
CSS
设置按钮列表的样式可细分为以下几个高级步骤：
- 设置自定义属性。
- Flexbox 布局。
- 包含装饰性伪元素的自定义按钮。
- 将元素放入 3D 空间。
自定义属性概览
自定义属性通过为原本看起来看起来随机的值指定有意义的名称，有助于消除值的歧义，从而避免重复代码和在子对象之间共享值。
以下是保存为 CSS 变量（也称为“自定义媒体”）的媒体查询。这些变量是全局性的，将在各种选择器中使用，以确保代码简洁易读。游戏菜单组件使用屏幕的动作偏好设置、系统配色方案和颜色范围功能。
@custom-media --motionOK (prefers-reduced-motion: no-preference);
@custom-media --dark (prefers-color-scheme: dark);
@custom-media --HDcolor (dynamic-range: high);
以下自定义属性用于管理配色方案并包含鼠标位置值，使游戏菜单具有互动性，使用户能够悬停它们。为自定义属性命名有助于提高代码易读性，因为它可以揭示值的用例或值结果的易记名称。
.threeD-button-set {
--y:;
--x:;
--distance: 1px;
--theme: hsl(180 100% 50%);
--theme-bg: hsl(180 100% 50% / 25%);
--theme-bg-hover: hsl(180 100% 50% / 40%);
--theme-text: white;
--theme-shadow: hsl(180 100% 10% / 25%);
--_max-rotateY: 10deg;
--_max-rotateX: 15deg;
--_btn-bg: var(--theme-bg);
--_btn-bg-hover: var(--theme-bg-hover);
--_btn-text: var(--theme-text);
--_btn-text-shadow: var(--theme-shadow);
--_bounce-ease: cubic-bezier(.5, 1.75, .75, 1.25);
@media (--dark) {
--theme: hsl(255 53% 50%);
--theme-bg: hsl(255 53% 71% / 25%);
--theme-bg-hover: hsl(255 53% 50% / 40%);
--theme-shadow: hsl(255 53% 10% / 25%);
}
@media (--HDcolor) {
@supports (color: color(display-p3 0 0 0)) {
--theme: color(display-p3 .4 0 .9);
}
}
}
浅色和深色主题背景圆锥形背景
浅色主题具有鲜艳的 cyan 到 deeppink 圆锥渐变，而深色主题则具有暗淡的圆锥渐变。如需详细了解使用圆锥渐变可以实现的效果，请参阅 conic.style。
html {
background: conic-gradient(at -10% 50%, deeppink, cyan);
@media (--dark) {
background: conic-gradient(at -10% 50%, #212529, 50%, #495057, #212529);
}
}
启用 3D 透视
要让元素存在于网页的 3D 空间中，需要初始化具有 perspective 的视口。我选择将视角放到 body 元素上，并使用视口单元来创建我喜欢的样式。
body {
perspective: 40vw;
}
这是视角可以产生的影响类型。
设置 <ul> 按钮列表的样式
此元素负责整个按钮列表宏布局，同时也是一个互动式 3D 浮动卡片。以下是实现这一目标的方法。
按钮组布局
Flexbox 可以管理容器布局。使用 flex-direction 将 flex 的默认方向从行更改为列，并通过将 align-items 的 stretch 更改为 start，确保每项内容与其内容的大小相同。
.threeD-button-set {
/* remove <ul> margins */
margin: 0;
/* vertical rag-right layout */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2.5vh;
}
接下来，将容器设置为 3D 空间上下文，并设置 CSS clamp() 函数，以确保卡片的旋转角度不会超出清晰可辨的角度。请注意，取值范围限制的中间值是自定义属性，这些 --x 和 --y 值将在稍后通过鼠标互动时通过 JavaScript 设置。
.threeD-button-set {
…
/* create 3D space context */
transform-style: preserve-3d;
/* clamped menu rotation to not be too extreme */
transform:
rotateY(
clamp(
calc(var(--_max-rotateY) * -1),
var(--y),
var(--_max-rotateY)
)
)
rotateX(
clamp(
calc(var(--_max-rotateX) * -1),
var(--x),
var(--_max-rotateX)
)
)
;
}
接下来，如果访问用户允许移动，则使用 will-change 向浏览器添加一条提示，指明此项目的转换将不断变化。此外，您还可以通过在转换上设置 transition 来启用插值。当鼠标与卡片交互时就会发生这种过渡，从而实现平滑过渡到旋转变化。该动画是一个不断运行的动画，用于展示卡片所在的 3D 空间，即使鼠标无法或无法与相应组件互动也是如此。
@media (--motionOK) {
.threeD-button-set {
/* browser hint so it can be prepared and optimized */
will-change: transform;
/* transition transform style changes and run an infinite animation */
transition: transform .1s ease;
animation: rotate-y 5s ease-in-out infinite;
}
}
rotate-y 动画仅在 50% 处设置中间关键帧，因为浏览器会将 0% 和 100% 默认设置为元素的默认样式。这是替换动画的简写形式，需要在同一位置开始和结束动画。这是清晰地呈现无限的交替动画的好方法。
@keyframes rotate-y {
50% {
transform: rotateY(15deg) rotateX(-6deg);
}
}
设置 <li> 元素的样式
每个列表项 (<li>) 都包含按钮及其边框元素。display 样式已更改，因此该项不会显示 ::marker。position 样式设置为 relative，因此即将推出的按钮伪元素可自行定位在按钮使用的整个区域内。
.threeD-button-set > li {
/* change display type from list-item */
display: inline-flex;
/* create context for button pseudos */
position: relative;
/* create 3D space context */
transform-style: preserve-3d;
}
设置 <button> 元素的样式
设置按钮样式可能会很困难，需要考虑多种状态和互动类型。由于平衡了伪元素、动画和互动，因此这些按钮会很快变得复杂。
初始<button>样式
以下是可支持其他状态的基础样式。
.threeD-button-set button {
/* strip out default button styles */
appearance: none;
outline: none;
border: none;
/* bring in brand styles via props */
background-color: var(--_btn-bg);
color: var(--_btn-text);
text-shadow: 0 1px 1px var(--_btn-text-shadow);
/* large text rounded corner and padded*/
font-size: 5vmin;
font-family: Audiowide;
padding-block: .75ch;
padding-inline: 2ch;
border-radius: 5px 20px;
}
按钮伪元素
按钮的边框不是传统的边框，而是带有边框的绝对位置伪元素。
这些元素对于展示已有的 3D 视角至关重要。其中一个伪元素将推离按钮，而其中一个则靠近用户。顶部和底部按钮的效果最明显。
.threeD-button button {
…
&::after,
&::before {
/* create empty element */
content: '';
opacity: .8;
/* cover the parent (button) */
position: absolute;
inset: 0;
/* style the element for border accents */
border: 1px solid var(--theme);
border-radius: 5px 20px;
}
/* exceptions for one of the pseudo elements */
/* this will be pushed back (3x) and have a thicker border */
&::before {
border-width: 3px;
/* in dark mode, it glows! */
@media (--dark) {
box-shadow:
0 0 25px var(--theme),
inset 0 0 25px var(--theme);
}
}
}
3D 转换样式
在 transform-style 下，设置为 preserve-3d，以便子项可以在 z 轴上将它们隔开。transform 设置为 --distance 自定义属性，该属性会在悬停和聚焦时增大。
.threeD-button-set button {
…
transform: translateZ(var(--distance));
transform-style: preserve-3d;
&::after {
/* pull forward in Z space with a 3x multiplier */
transform: translateZ(calc(var(--distance) / 3));
}
&::before {
/* push back in Z space with a 3x multiplier */
transform: translateZ(calc(var(--distance) / 3 * -1));
}
}
条件动画样式
如果用户可以接受动作，该按钮会提示浏览器转换属性应准备好进行更改，并且会为 transform 和 background-color 属性设置转换。注意观察时长上的差异，我觉得这产生了一种细微的交错效果。
.threeD-button-set button {
…
@media (--motionOK) {
will-change: transform;
transition:
transform .2s ease,
background-color .5s ease
;
&::before,
&::after {
transition: transform .1s ease-out;
}
&::after { transition-duration: .5s }
&::before { transition-duration: .3s }
}
}
悬停和聚焦互动样式
互动动画的目标是让构成扁平显示按钮的各个层展开。若要完成此操作，首先将 --distance 变量设置为 1px。以下代码示例中显示的选择器会检查按钮是否正在被应看到焦点指示器且未被激活的设备悬停或聚焦。如果是这样，它会应用 CSS 执行以下操作：
- 应用悬停背景颜色。
- 增加距离 。
- 添加弹跳缓和效果。
- 错开伪元素转换。
.threeD-button-set button {
…
&:is(:hover, :focus-visible):not(:active) {
/* subtle distance plus bg color change on hover/focus */
--distance: 15px;
background-color: var(--_btn-bg-hover);
/* if motion is OK, setup transitions and increase distance */
@media (--motionOK) {
--distance: 3vmax;
transition-timing-function: var(--_bounce-ease);
transition-duration: .4s;
&::after { transition-duration: .5s }
&::before { transition-duration: .3s }
}
}
}
对于 reduced 动作偏好设置，3D 视角仍然非常简洁。顶部和底部的元素以一种巧妙的方式展现效果。
使用 JavaScript 进行小幅改进
该界面已经可以通过键盘、屏幕阅读器、游戏手柄、触控和鼠标使用，但我们可以添加一些简单的 JavaScript 代码来简化几种场景。
支持箭头键
使用 Tab 键可以很好地浏览菜单，但我希望方向键或操纵杆能够将焦点移到游戏手柄上。通常用于 GUI 挑战界面的 roving-ux 库将为我们处理箭头键。以下代码会指示库将焦点置于 .threeD-button-set 中，并将焦点转发到按钮子项。
import {rovingIndex} from 'roving-ux'
rovingIndex({
element: document.querySelector('.threeD-button-set'),
target: 'button',
})
鼠标视差互动
跟踪鼠标并使菜单倾斜，目的是模拟 AR 和 VR 视频游戏界面，在该界面中可以有一个虚拟指针，而不是鼠标。当元素超感知指针时，这可能会很有趣。
由于这是一个小小的额外功能，因此我们会将互动放在查询用户的动作偏好设置之后。此外，在设置过程中，请使用 querySelector 将按钮列表组件存储在内存中，并将元素的边界缓存到 menuRect 中。使用这些边界确定基于鼠标位置应用于卡片的旋转偏移量。
const menu = document.querySelector('.threeD-button-set')
const menuRect = menu.getBoundingClientRect()
const { matches:motionOK } = window.matchMedia(
'(prefers-reduced-motion: no-preference)'
)
接下来，我们需要一个函数，它接受鼠标 x 和 y 位置，并返回一个可用于旋转卡片的值。以下函数使用鼠标位置来确定它在框的哪一侧以及大小。函数会返回增量。
const getAngles = (clientX, clientY) => {
const { x, y, width, height } = menuRect
const dx = clientX - (x + 0.5 * width)
const dy = clientY - (y + 0.5 * height)
return {dx,dy}
}
最后，观察鼠标移动，将位置传递给 getAngles() 函数，并将增量值用作自定义属性样式。我除以 20 来填充增量，让它不那么突兀，可能有更好的方法如果您从一开始还记得，我们不妨将 --x 和 --y 属性放在 clamp() 函数的中间，这样可以防止鼠标在将卡片过度旋转到难以辨认的位置。
if (motionOK) {
window.addEventListener('mousemove', ({target, clientX, clientY}) => {
const {dx,dy} = getAngles(clientX, clientY)
menu.attributeStyleMap.set('--x', `${dy / 20}deg`)
menu.attributeStyleMap.set('--y', `${dx / 20}deg`)
})
}
翻译和路线
在使用其他编写模式和语言测试游戏菜单时，有一个问题。
在用户代理样式表中，<button> 元素的 writing-mode 具有 !important 样式。这意味着需要更改游戏菜单 HTML，以适应所需的设计。将按钮列表更改为链接列表可让逻辑属性更改菜单方向，因为 <a> 元素没有浏览器提供的 !important 样式。
总结
现在，您已经知道我是怎么做的了，您如何‽ 🙂? 您能否在菜单中添加加速度计互动功能，以便平铺手机会旋转菜单？我们能否改善无动作体验？
让我们一起采用多样化的方法，学习在 Web 上构建应用的所有方法。 创建一个演示，在 Twitter 微博中发送链接，然后我会将其添加到下面的“社区混剪”部分！
社区混剪作品
此处尚无任何可显示的内容！