用html加css画个新拟态键盘

背着行囊去远方

已于 2024-08-27 13:35:00 修改

阅读量1.4k

点赞数 7

分类专栏：学习笔记文章标签： css html css3

于 2021-10-28 11:16:59 首次发布

本文链接：https://blog.csdn.net/qq_28121913/article/details/121010552

版权

学习笔记专栏收录该内容

31 篇文章 9 订阅

订阅专栏

效果

在这里插入图片描述

代码

<!doctype html>
<html>
<head>
 <title>假的键盘</title>
 <style>
	body{
	 margin:0;
	 padding:0;
	 
	}
    #box1{
	  background-color:#f1f1f7;
	  display:flex;
	  flex-direction:column;
	  justify-content:center;
	  align-items:center;
	  height:100vh;
	}
	.keyboard{
	  user-select: none;
	  cursor: pointer;
	}
	.keys{
		display: flex;
		list-style: none;
		margin: 0 0;
	}
	li{
		box-shadow: 0 -6px 10px rgb(255, 255, 255),0 4px 15px rgba(0, 0, 0,0.3);
		width: 3em;
		font-size:2em;
		margin:0.2em;
		background-color: #f2f2f2;
		border-radius: 15px;
		text-align: center;
		line-height: 3em;
		transition: all 0.25s;
	}
	li:active{
		box-shadow:0 0 4px 0 rgba(0, 0, 0,0.15);
		color: rgb(12, 164, 190);
		text-shadow:  0 0 15px #57c1f1;
	}
	 .one{
		color:#eb3f33;
	}
	.one li{
		width: 3.12em;
	}
	.two{
		color: #df960e;
	}
	.three{
		color:#2b46df;
	}
	.four{
		color:rgb(57,194,75);
	}
	.five{
		color:#8919ca;
	}
	.six{
		color: #e73d09;
	}
	.esc{
		width: 3.5em;
	}
	.back{
		width: 4.7em;
	}
	.tab{
		width: 4.7em;
	}
	 .caps{
		width: 6.3em;
	}
	.enter{
		width: 4.7em;
	}
	.shift{
		width: 7.2em;
	}
	.ctrl,.win,.alt,.fn,.menu{
		width: 4em;
	}
	.space{
		width: 18em;
	} 
	#box2{
	 display:flex;
	 justify-content:center;
	 align-items:center;
	 background-color:#2890e3;
	 height:100vh;
	}
 </style>
</head>
<body>
  <div id="box1">
	 <div class="keyboard">
	   <ul class="keys one">
		<li class="esc">Esc</li>
		<li>F1</li>
		<li>F2</li>
		<li>F3</li>
		<li>F4</li>
		<li>F5</li>
		<li>F6</li>
		<li>F7</li>
		<li>F8</li>
		<li>F9</li>
		<li>F10</li>
		<li>F11</li>
		<li>F12</li>
		<li>Prc</li>
	   </ul>
	   <ul class="keys two">
		<li>`</li>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>0</li>
		<li>-</li>
		<li>=</li>
		<li class="back">&nsp<-</li>
	   </ul>
	   <ul class="keys three">
		<li class="tab">Tab</li>
		<li>Q</li>
		<li>W</li>
		<li>E</li>
		<li>R</li>
		<li>T</li>
		<li>Y</li>
		<li>U</li>
		<li>I</li>
		<li>O</li>
		<li>P</li>
		<li>[</li>
		<li>]</li>
		<li>\</li>
	   </ul>
	   <ul class="keys four">
		<li class="caps">Caps</li>
		<li>A</li>
		<li>S</li>
		<li>D</li>
		<li>F</li>
		<li>G</li>
		<li>H</li>
		<li>J</li>
		<li>K</li>
		<li>L</li>
		<li>;</li>
		<li>'</li>
		<li class="enter">Enter</li>
	   </ul>
	   <ul class="keys five">
		<li class="shift">Shift</li>
		<li>Z</li>
		<li>X</li>
		<li>C</li>
		<li>V</li>
		<li>B</li>
		<li>N</li>
		<li>M</li>
		<li>,</li>
		<li>.</li>
		<li>/</li>
		<li class="shift">Shift</li>
	   </ul>
	   <ul class="keys six">
		<li class="ctrl">Ctrl</li>
		<li class="fn">Fn</li>
		<li class="win">Win</li>
		<li class="alt">Alt</li>
		<li class="space">Space</li>
		<li class="alt">Alt</li>
		<li class="menu">Menu</li>
		<li class="ctrl">Ctrl</li>
	   </ul>
	</div>
  </div>
  <div id="box2">
  
  </div>
 
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
	<script>
		$("ul li").click(ele=>{
		
		})
	</script>
</body>
</html>