JS迷你键盘
JS迷你键盘
以CSS书写样式，在底部添加了JS脚本作为驱动，实现与键盘交互式响应。JS代码比较精简，适合初学者练习、拓展，CSS较难，每一个按键都是好多个div拼凑的，CSS精通者可以尝试
| 支持键盘点击事件，有响应效果 |
|---|
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>奇酷教学键盘title>
<style>
*{margin:0;padding:0;list-style-type:none;}
.keyboard {
display: grid;
grid-template-columns: repeat(30, 1.9vw);
grid-template-rows: repeat(5, 4.75vw);
grid-gap: 0.95vw;
background: #c2ccdb;
padding: 1.727272727272727vw;
border-radius: 1.266666666666667vw;
background: #d8dee8;
box-shadow: -0.316666666666667vw -0.316666666666667vw 0.95vw #f3f5f8, 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;
}
.keyboard .key {
border-radius: 0.76vw;
grid-column: auto/span 2;
width: 100%;
height: 100%;
padding: 0.475vw;
font-size: 1.9vw;
display: grid;
align-items: center;
color: #8a94a4;
justify-content: center;
cursor: pointer;
background: #d8dee8;
box-shadow: -0.316666666666667vw -0.316666666666667vw 0.95vw #f3f5f8, 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;
transition: all 100ms cubic-bezier(0.09, 0.32, 0.34, 2);
user-select: none;
}
.keyboard .key:hover,.keyboard .key.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f6f8fa, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;
color: #fff;
text-shadow: 0 0 10px #f7f9fa, 0 0 15px #f7f9fa, 0 0 20px #f7f9fa;
}
.keyboard .key.dotted {
position: relative;
}
.keyboard .key.dotted::before {
content: '_';
font-weight: bold;
color: #b5c0d2;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}
.keyboard .key.esc {
background: #ed4c67;
color: #fbdbe1;
}
.keyboard .key.esc:hover,
.keyboard .key.esc.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f38e9f, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c71432;
color: #fff;
text-shadow: 0 0 10px #f59eac, 0 0 15px #f59eac, 0 0 20px #f59eac;
}
.keyboard .key.back {
background: #d63031;
color: #f7d6d6;
}
.keyboard .key.back:hover,
.keyboard .key.back.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #e57c7d, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #991e1f;
color: #fff;
text-shadow: 0 0 10px #e88f90, 0 0 15px #e88f90, 0 0 20px #e88f90;
}
.keyboard .key.shift {
background: #1e90ff;
color: #d2e9ff;
}
.keyboard .key.shift:hover,
.keyboard .key.shift.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #71b9ff, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #0065c8;
color: #fff;
text-shadow: 0 0 10px #85c3ff, 0 0 15px #85c3ff, 0 0 20px #85c3ff;
}
.keyboard .key.control {
background: #be2edd;
color: #f2d5f8;
}
.keyboard .key.control:hover,
.keyboard .key.control.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #d57be9, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #891aa1;
color: #fff;
text-shadow: 0 0 10px #db8eec, 0 0 15px #db8eec, 0 0 20px #db8eec;
}
.keyboard .key.win {
background: #f7b731;
color: #fdf1d6;
}
.keyboard .key.win:hover,
.keyboard .key.win.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #fad17d, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c78908;
color: #fff;
text-shadow: 0 0 10px #fad890, 0 0 15px #fad890, 0 0 20px #fad890;
}
.keyboard .key.alt {
background: #5352ed;
color: #dddcfb;
}
.keyboard .key.alt:hover,
.keyboard .key.alt.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #9291f3, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #1615ca;
color: #fff;
text-shadow: 0 0 10px #a2a1f5, 0 0 15px #a2a1f5, 0 0 20px #a2a1f5;
}
.keyboard .key.fn {
background: #26de81;
color: #d4f8e6;
}
.keyboard .key.fn:hover,
.keyboard .key.fn.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #76eaaf, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #189e5a;
color: #fff;
text-shadow: 0 0 10px #8aedbb, 0 0 15px #8aedbb, 0 0 20px #8aedbb;
}
.keyboard .key.cap {
background: #ee5a24;
color: #fcded3;
position: relative;
}
.keyboard .key.cap:hover,.keyboard .key.cap.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f49675, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #b23a0e;
color: #fff;
text-shadow: 0 0 10px #f6a588, 0 0 15px #f6a588, 0 0 20px #f6a588;
}
.keyboard .key.cap::before {
content: '';
position: absolute;
width: 0.5vw;
height: 0.5vw;
background: #f6ac91;
top: 1vw;
right: 1vw;
border-radius: 50%;
}
.keyboard .key.cap.on::before {
background: #fbded3;
box-shadow: 0 0 0.5vw 0.2vw rgba(255,255,255,0.8);
}
.keyboard .key.tab {
background: #12cbc4;
color: #cafaf8;
}
.keyboard .key.tab:hover,
.keyboard .key.tab.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #5aede7, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #0d8e89;
color: #fff;
text-shadow: 0 0 10px #72f0eb, 0 0 15px #72f0eb, 0 0 20px #72f0eb;
}
.keyboard .key.enter {
background: #fdcb6e;
color: #fff5e2;
}
.keyboard .key.enter:hover,
.keyboard .key.enter.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #fddea3, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #fba403;
color: #fff;
text-shadow: 0 0 10px #fde2b0, 0 0 15px #fde2b0, 0 0 20px #fde2b0;
}
.keyboard .key.s2 {
font-size: 1.727272727272727vw;
grid-column: auto/span 2;
}
.keyboard .key.s3 {
font-size: 1.727272727272727vw;
grid-column: auto/span 3;
}
.keyboard .key.s4 {
font-size: 1.727272727272727vw;
grid-column: auto/span 4;
}
.keyboard .key.s5 {
font-size: 1.727272727272727vw;
grid-column: auto/span 5;
}
.keyboard .key.s6 {
font-size: 1.727272727272727vw;
grid-column: auto/span 6;
}
.keyboard .key.s12 {
font-size: 1.727272727272727vw;
grid-column: auto/span 12;
}
.keyboard .key[on-shift] {
font-size: 1.461538461538461vw;
justify-items: center;
}
.keyboard .key[on-shift]::before {
content: attr(on-shift);
align-items: end;
}
@import url("https://fonts.googleapis.com/css2?family=Sen:wght@700&display=swap");
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Sen', sans-serif;
min-height: 100vh;
overflow: hidden;
display: grid;
place-items: center;
background: radial-gradient(circle at top left, #d8dee8 30%, #c2ccdb);
}
style>
head>
<body>
<div class="keyboard">
<div class="key s2 esc" data-key="">div>
<div class="key" on-shift="!" data-key="1">1div>
<div class="key" on-shift="@" data-key="2">2div>
<div class="key" on-shift="#" data-key="3">3div>
<div class="key" on-shift="$" data-key="4">4div>
<div class="key" on-shift="%" data-key="5">5div>
<div class="key" on-shift="^" data-key="6">6div>
<div class="key" on-shift="&" data-key="7">7div>
<div class="key" on-shift="*" data-key="8">8div>
<div class="key" on-shift="(" data-key="9">9div>
<div class="key" on-shift=")" data-key="0">0div>
<div class="key sub" on-shift="_" data-key="-">-div>
<div class="key add" on-shift="+" data-key="=">=div>
<div class="key s4 back" data-key="">div>
<div class="key s3 tab" data-key="">div>
<div class="key" data-key="Q">Qdiv>
<div class="key" data-key="W">Wdiv>
<div class="key" data-key="E">Ediv>
<div class="key" data-key="R">Rdiv>
<div class="key" data-key="T">Tdiv>
<div class="key" data-key="Y">Ydiv>
<div class="key" data-key="U">Udiv>
<div class="key" data-key="I">Idiv>
<div class="key" data-key="O">Odiv>
<div class="key" data-key="P">Pdiv>
<div class="key openbracket" on-shift="{" data-key="[">[div>
<div class="key closebracket" on-shift="}" data-key="]">]div>
\div>
<div class="key s4 cap" data-key="">div>
<div class="key" data-key="A">Adiv>
<div class="key" data-key="S">Sdiv>
<div class="key" data-key="D">Ddiv>
<div class="key dotted" data-key="F">Fdiv>
<div class="key" data-key="G">Gdiv>
<div class="key" data-key="H">Hdiv>
<div class="key dotted" data-key="J">Jdiv>
<div class="key" data-key="K">Kdiv>
<div class="key" data-key="L">Ldiv>
<div class="key semi" on-shift=":" data-key=";">;div>
<div class="key comma" on-shift=""" data-key=",">,div>
<div class="key s4 enter" data-key="">div>
<div class="key s5 shift" data-key="">div>
<div class="key" data-key="Z">Zdiv>
<div class="key" data-key="X">Xdiv>
<div class="key" data-key="C">Cdiv>
<div class="key" data-key="V">Vdiv>
<div class="key" data-key="B">Bdiv>
<div class="key" data-key="N">Ndiv>
<div class="key" data-key="M">Mdiv>
<div class="key openangular" on-shift="<" data-key=",">,div>
<div class="key closeangular" on-shift=">" data-key=".">.div>
<div class="key slash" on-shift="?" data-key="">/div>
<div class="key s5 shift up" data-key="">div>
<div class="key s3 control" data-key="☕">☕div>
<div class="key s3 win" data-key="">div>
<div class="key s3 alt" data-key="⭐️">⭐️div>
<div class="key s12 space" data-key="">div>
<div class="key s3 alt" data-key="⭐️">⭐️div>
<div class="key s2 fn left" data-key="">div>
<div class="key s2 fn down" data-key="">div>
<div class="key s2 control right" data-key="">div>
div>
body>
<script type="text/javascript">
keyHash = {
8: ".back",
9: ".tab",
13: ".enter",
16: ".shift",
17: ".control",
18: ".alt",
20: ".cap",
27: ".esc",
32: ".space",
37: ".left",
38: ".up",
39: ".right",
40: ".down",
186: ".semi",
187: '.add',
189: '.sub',
222: ".comma",
219: ".openbracket",
221: ".closebracket",
220: ".pipe",
188: ".openangular",
190: ".closeangular",
191: ".slash",
91: '.win'
};
const cap = document.querySelector('.cap');
function checkCaps() {
if (event.getModifierState("CapsLock")) {
cap.classList.add('on')
} else {
cap.classList.remove('on')
}
}
const handleKeyDown = (e) => {
checkCaps()
let target = keyHash[e.keyCode];
if (!target) target = `.key[data-key="${String.fromCharCode(e.keyCode)}"]`;
const key = document.querySelector(target);
key && key.classList.toggle("pressed");
};
function unPress(e) {
if (e.propertyName === "transform") this.classList.remove("pressed");
}
window.addEventListener("keydown", handleKeyDown);
const keys = document.querySelectorAll(".key");
keys.forEach((k) => k.addEventListener("transitionend", unPress));
script>
html>
本文部分代码引用自“ 站长之家 ”，
喜欢请支持原创
推荐阅读：
情人节送给粉丝的礼物
诺基亚贪吃蛇
游动的花花肠子
英雄普罗米修斯