欢迎光临
我的个人博客网站

CSS实现迷你键盘

最近做了一个迷你键盘的dome,这里分享给大家

dome下载地址(点击下载)

代码如下:

<!DOCTYPE html> <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">1</div>   <div class="key" on-shift="@" data-key="2">2</div>   <div class="key" on-shift="#" data-key="3">3</div>   <div class="key" on-shift="$" data-key="4">4</div>   <div class="key" on-shift="%" data-key="5">5</div>   <div class="key" on-shift="^" data-key="6">6</div>   <div class="key" on-shift="&" data-key="7">7</div>   <div class="key" on-shift="*" data-key="8">8</div>   <div class="key" on-shift="(" data-key="9">9</div>   <div class="key" on-shift=")" data-key="0">0</div>   <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">Q</div>   <div class="key" data-key="W">W</div>   <div class="key" data-key="E">E</div>   <div class="key" data-key="R">R</div>   <div class="key" data-key="T">T</div>   <div class="key" data-key="Y">Y</div>   <div class="key" data-key="U">U</div>   <div class="key" data-key="I">I</div>   <div class="key" data-key="O">O</div>   <div class="key" data-key="P">P</div>   <div class="key openbracket" on-shift="{" data-key="[">[</div>   <div class="key closebracket" on-shift="}" data-key="]">]</div>   <div class="key s3 pipe" on-shift="|" data-key=""></div>   <div class="key s4 cap" data-key="🔓">🔓</div>   <div class="key" data-key="A">A</div>   <div class="key" data-key="S">S</div>   <div class="key" data-key="D">D</div>   <div class="key dotted" data-key="F">F</div>   <div class="key" data-key="G">G</div>   <div class="key" data-key="H">H</div>   <div class="key dotted" data-key="J">J</div>   <div class="key" data-key="K">K</div>   <div class="key" data-key="L">L</div>   <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">Z</div>   <div class="key" data-key="X">X</div>   <div class="key" data-key="C">C</div>   <div class="key" data-key="V">V</div>   <div class="key" data-key="B">B</div>   <div class="key" data-key="N">N</div>   <div class="key" data-key="M">M</div>   <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> 

  

赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS实现迷你键盘
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏