手把手教你用CSS实现一个VR 3D游戏菜单栏效果

@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);

}

}

}

浅色和深色主题圆锥形背景

===============================================================================

浅色主题有一个鲜艳的青色到粉红色的圆锥渐变，而深色主题有一个暗色的微妙圆锥渐变。

html {

background: conic-gradient(at -10% 50%, deeppink, cyan);

@media (–dark) {

background: conic-gradient(at -10% 50%, #212529, 50%, #495057, #212529);

}

}

启用3D透视功能

===========================================================================

为了让元素存在于网页的三维空间中，需要初始化一个带透视的视口。我选择把透视放在主体元素上，并使用视口单元来创建我喜欢的风格。

body {

perspective: 40vw;

}

这就是视角所能产生的影响。

为<ul>按钮列表设计样式

==================================================================================

这个元素负责整个按钮列表的宏观布局，同时也是一个互动的、3D的浮动卡片。这