css+js模拟键盘效果
代码语言：html
所属分类：布局界面
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive 60% Keyboard</title>
<link rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/reset.min.css">
<style>
body {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #111;
background-image: linear-gradient(45deg, rgba(34, 34, 34, 0.667), rgba(34, 34, 34, 0.334)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/grit-fs8.png);
color: #999;
font-family: system-ui,sans-serif;
}
em {
margin-top: 1rem;
}
.keyboard {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 0;
border-radius: 4px;
border: 13px solid #777;
border-top-color: #666;
border-bottom-color: #888;
outline: 3px solid rgba(0, 0, 0, 0.2);
outline-offset: -1px;
box-shadow: inset 0 1rem 1rem rgba(0, 0, 0, 0.5), 0 2rem 3rem -0.5rem rgba(0, 0, 0, 0.55);
background-image: radial-gradient(#111, #222);
padding: 0.25rem;
}
.row {
height: 40px;
display: flex;
justify-content: space-between;
width: 617.2px;
padding-top: 1px;
margin-bottom: 2px;
}
kbd {
border-radius: 3px;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.75);
display: inline-block;
font-family: system-ui,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.125;
padding: 0.33em 0.66em;
position: relative;
text-align: center;
vertical-align: middle;
width: 40px;
height: 40px;
border: 3px solid transparent;
border-top: 2px solid transparent;
border-bottom: 6px solid transparent;
background-color: #e9e8e6;
border-color: #c3c0bb;
border-top-color: #eeedeb;
border-bottom-color: #a6a29a;
box-shadow: 0 -0.125em 0 -0.063em #a6a29a, 0 0.125em 0 -0.063em rgba(0, 0, 0, 0.5);
transition: -webkit-transform 100ms;
transition: transform 100ms;
transition: transform 100ms, -webkit-transform 100ms;
outline: 0;
}
kbd::before {
content: '';
position: absolute;
top: 0px;
left: -1px;
bottom: -1px;
right: -1px;
border-radius: 4px;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
}
kbd::before {
border-left-color: #b2afa8;
border-right-color: #b2afa8;
border-bottom-color: #959187;
box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.15);
background-image: linear-gradient(toright, #e9e8e6, #c9c9c9 5%, transparent 40%, transparent 60%, #c9c9c9 95%, #e9e8e6);
}
kbd:active, kbd.pressed {
-webkit-transform: scale(0.96, 0.96) translate(0, 3px);
transform: scale(0.96, 0.96) translate(0, 3px);
}
kbd[data-key]::after {
position: relative;
z-index: 1;
content: attr(data-key);
text-transform: capitalize;
}
kbd[data-alt]::after {
white-space: pre;
content: attr(data-alt) "\a" attr(data-key);
line-height: 0.95rem;
font-size: 0.7em;
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
}
kbd[data-key=tab], kbd[data-key=enter], kbd[data-key=caps], kbd[data-key=backspace], kbd[data-key=lshift], kbd[data-key=rshift], kbd[data-key=lctrl], kbd[data-key=rctrl], kbd[data-key=lalt], kbd[data-key=ralt], kbd[data-key=lwin], kbd[data-key=rwin], kbd[data-key=rctx] {
background-color: #7f8384;
border-color: #575a5a;
border-top-color: #848889;
border-bottom-color: #393b3b;
box-shadow: 0 -0.125em 0 -0.063em #393b3b, 0 0.125em 0 -0.063em rgba(0, 0, 0, 0.5);
}
kbd[data-key=tab]:after, kbd[data-key=enter]:after, kbd[data-key=caps]:after, kbd[data-key=backspace]:after, kbd[data-key=lshift]:after, kbd[data-key=rshift]:after, kbd[data-key=lctrl]:after, kbd[data-key=rctrl]:after, kbd[data-key=lalt]:after, kbd[data-key=ralt]:after, kbd[data-key=lwin]:after, kbd[data-key=rwin]:after, kbd[data-key=rctx]:after {
font-size: 0.725em;
top: 0;
left: 0;
right: 0;
line-height: 31.2px;
position: absolute;
}
kbd[data-key=tab]::before, kbd[data-key=enter]::before, kbd[data-key=caps]::before, kbd[data-key=backspace]::before, kbd[data-key=lshift]::before, kbd[data-key=rshift]::before, kbd[data-key=lctrl]::before, kbd[data-key=rctrl]::before, kbd[data-key=lalt]::before, kbd[data-key=ralt]::before, kbd[data-key=lwin]::before, kbd[data-key=rwin]::before, kbd[data-key=rctx]::before {
border-left-color: #454848;
border-right-color: #454848;
border-bottom-color: #272929;
box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.15);
background-image: linear-gradient(toright, #7f8384, #636363 5%, transparent 40%, transparent 60%, #636363 95%, #7f8384);
}
kbd[data-key=lshift]::after, kbd[data-key=rshift]::after {
content: 'Shift';
}
kbd[data-key=lctrl]::after, kbd[data-key=rctrl]::after {
content: 'Ctrl';
}
kbd[data-key=lwin]::after, kbd[data-key=rwin]::after {
content: '\2756';
font-size: 1rem;
}
kbd[data-key=lalt]::after, kbd[data-key=ralt]::after {
content: 'Alt';
}
kbd[data-key=space]::after {
content: none;
}
kbd[data-key=rctx]::after {
content: '\2630';
}
kbd[data-key=lalt]::after, kbd[data-key=ralt]::after {
content: 'Alt';
}
kbd[data-key=tab], kbd[data-key="\\"] {
width: 60px;
}
kbd[data-key=caps] {
width: 70px;
}
kbd[data-key=backspace] {
width: 80px;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0