CSS实现迷你键盘

前端开发作者： 2024-08-26 07:50:01
最近做了一个迷你键盘的dome，这里分享给大家 dome下载地址（点击下载）代码如下： <!DOCTYPE html> <html lang="en" >
<!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,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="
原创声明
本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
本文链接：http://www.jiecseo.com/news/show_68857.html