暗黑键盘，HTML/Vue代码在线实时编辑、预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

            
             /* 定义全局CSS变量 */
 :root {
     --sizeVar: 2vw;
     /* 用于控制整体大小的变量，基于视窗宽度 */
     --animVar: 200ms;
     /* 动画持续时间变量 */
 }

 /* 页面主体样式 */
 body {
     background-color: #282c34;
     position: absolute;
     inset: 0;
     /* 四周边距都设为0 */
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
 }

 /* 按键容器样式 */
 .flex {
     position: absolute;
     display: flex;
     background-color: #141615;
     padding: calc(var(--sizeVar) * 2.5);
     border-radius: calc(var(--sizeVar) * 1.5);
     /* 复杂的阴影效果，创建立体感 */
     box-shadow: 0 calc(var(--sizeVar) * 1) calc(var(--sizeVar) * 0.5) calc(var(--sizeVar) * -1) #ffffff99 inset,
         0 calc(var(--sizeVar) * 0.25) calc(var(--sizeVar) * 0.5) calc(var(--sizeVar) * 0.2) #00000055,
         0 calc(var(--sizeVar) * 0.5) calc(var(--sizeVar) * 2.5) calc(var(--sizeVar) * 0.2) #00000055;
     justify-content: center;
     align-items: center;
     gap: var(--sizeVar);
 }

 /* 单个按键样式 */
 .key {
     user-select: none;
     /* 禁止文字选择 */
     width: calc(var(--sizeVar) * 5.6);
     aspect-ratio: 1 / 1;
     /* 保持正方形比例 */
     /* 渐变背景 */
     background: linear-gradient(0deg,
             rgba(33, 33, 35, 1) 0%,
             rgba(53, 53, 53, 1) 100%);
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: calc(var(--sizeVar) * 0.7);
     font-size: calc(var(--sizeVar) * 2);
     font-family: sans-serif;
     font-weight: 300;
     color: #ffffff;
     cursor: pointer;
     box-shadow: 0 calc(var(--sizeVar) * 1) calc(var(--sizeVar) * 1) calc(var(--sizeVar) * -1) #ffffff55 inset,
         0 calc(var(--sizeVar) * -1) calc(var(--sizeVar) * 0.5) calc(var(--sizeVar) * -1) #ffffff33 inset,
         0 0 calc(var(--sizeVar) * 0.5) calc(var(--sizeVar) * 0.2) #00000055;
     transition: filter var(--animVar) ease-in-out 0s,
         box-shadow var(--animVar) ease-in-out 0s,
         color var(--animVar) ease-in-out 0s;
 }

 /* 按键悬停效果 */
 .key:hover {
     filter: brightness(90%);
     /* 降低亮度 */
     color: #666666;
     /* 改变文字颜色 */
     /* 移除内阴影效果 */
     box-shadow: 0 calc(var(--sizeVar) * 1) calc(var(--sizeVar) * 1) calc(var(--sizeVar) * -1) #ffffff00 inset,
         0 calc(var(--sizeVar) * -1) calc(var(--sizeVar) * 0.5) calc(var(--sizeVar) * -1) #ffffff00 inset,
         0 0 calc(var(--sizeVar) * 0.5) calc(var(--sizeVar) * 0.2) #00000055;
 }