css实现一个暗黑迷你键盘输入效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现一个暗黑迷你键盘输入效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --gap: 15px; --key-width: 50px; } body { margin: 0; overflow: hidden; background-color: #0a0a0a; height: 100vh; display: flex; align-items: center; justify-content: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .keyboard { display: inline-flex; flex-direction: column; padding: var(--gap); border-radius: 17.5px; transform-style: preserve-3d; perspective: 1200px; transform: perspective(1200px) rotateX(20deg); } .row { display: flex; transform-style: preserve-3d; } .row + .row { margin-top: var(--gap); } .keyboard, .key { background: #141414; border: 2px solid rgba(64, 64, 64, 0.2); box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.01), -2px -2px 6px rgba(255, 255, 255, 0.03), 2px 2px 5px rgba(0, 0, 0, 0.3), 5px 5px 10px rgba(0, 0, 0, 0.3); } .key { --width: var(--key-width); --color: hsl(0, 0%, 85%); --size: 1; --size-2: 1.654545; --size-3: 1.981818; --size-4: 2.290909; --size-5: 2.618181; --size-6: 1.327272; --size-7: 7.8; display: flex; align-items: center; justify-content: center; width: calc(var(--width) * var(--size)); height: var(--width); border-radius: 7.5px; flex-shrink: 0; box-sizing: border-box; transform: translate3D(0, 0, 30px); transition: 100ms; cursor: pointer; } .key:hover { transform: translate3D(0, 0, 35px); } .key:active, .key[data-selected]:not([data-selected=false]) { transform: translate3D(0, 0, 25px); border-color: var(--color); box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.01), -2px -2px 6px rgba(255, 255, 255, 0.03), 2px 2px 5px rgba(0, 0, 0, 0.3), 5px 5px 10px rgba(0, 0, 0, 0.3), 0px 2px 8px var(--color), 0px 5px 20px var(--color); } .key + .key { margin-left: var(--gap); } .key:before { display: block; content: ""; width: 15px; height: 15px; border-radius: 7.5px; background-color: var(--color); } .key.stretch { padding: 0 25px; } .key.stretch:before { width: 100%; } .key.empty:before { display: none; } .key.size-2 { --size: var(--size-2); } .key.size-3 { --size: var(--size-3); } .key.size-4 { --size: var(--size-4); } .key.size-5 { --size: var(--size-5); } .key.size-6 { --size: var(--size-6); } .key.size-7 { --size: var(--size-7); } .key.grey { --color: hsl( 0, 0%, 50%); } .key.red { --color: hsl( 0, 80%, 60%); } .key.orange { --color: hsl( 25, 80%, 60%); } .key.yellow { --color: hsl( 50, 80%, 60%); } .key.green { --color: hsl(150, 80%, 60%); } .key.blue { --color: hsl(210, 80%, 60%); } .key.purple { --color: hsl(270, 80%, 60%); } .key[data-color=grey] { --color: hsl( 0, 0%, 50%); } .key[data-color=red] { --color: hsl( 0, 80%, 60%); } .key[data-color=orange] { --color: hsl( 25, 80%, 60%); } .key[data-color=yellow] { --color: hsl( 50, 80%, 60%); } .key[data-color=green] { --color: hsl(150, 80%, 60%); } .key[data-color=blue] { --color: hsl(210, 80%, 60%); } .key[data-color=purple] { --color: hsl(270, 80%, 60%); } a { text-decoration: none; color: inherit; } </style> </head> <body> <div class="keyboard"> <div class="row"> <div class="key orange" data-code="Escape" data-macro="orange"></div> <div class="key" data-code="Digit1"></div> <div class="key" data-code="Digit2"></div> <div class="key" data-code="Digit3"></div> <div class="key" data-code="Digit4"></div> <div class="key" data-code="Digit5"></div> <div class="key" data-code="Digit6"></div> <div class="key" data-code="Digit7"></div> <div class="key" data-code="Digit8"></div> <div class="key" data-code="Digit9"></div> <div class="key" data-code="Digit0"></div> <div class="key" data-code="Minus"></div> <div class="key" data-code="Equal"></div> <div class="key size-4 grey stretch" data-code="Backspace"></div> <div class="key red" data-macro="red"></div> </div> <div class="row"> <div class="key size-2 grey stretch" data-code="Tab"></div> <div class="key" data-code="KeyQ"></div> <div class="key" data-code="KeyW"></div> <div class="key" data-code="KeyE"></div> <div class="key" data-code="KeyR"></div> <div class="key" data-code="KeyT"></div> <div class="key" data-code="KeyY"></div> <div class="key" data-code="KeyU"></div> <div class="key" data-code="KeyI"></div> <div class="key" data-code="KeyO"></div> <div class="key" data-code="KeyP"></div> <div class="key" data-code="BracketLeft"></div> <div class="key" data-code="BracketRight"></div> <div class="key size-2 grey stretch" data-code="Backslash"></div> <div class="key yellow" data-macro="yellow"></div> </div> <div class="row"> <div class="key size-3 grey stretch" data-code="CapsLock"></div> <div class="key" data-code="KeyA"></div> <div class="key" data-code="KeyS"></div> <div class="key" data-code="KeyD"></div> <div class="key" .........完整代码请登录后点击上方下载按钮下载查看
网友评论0