div+css布局实现清爽手机屏幕键盘效果代码-html代码-BFW代码库

div+css布局实现清爽手机屏幕键盘效果代码

代码语言：html

代码描述：div+css布局实现清爽手机屏幕键盘效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 97vh;
  background: #00BCD4;
}
span {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.base {
  border-radius: 10px;
  background: #272B2C;
  display: flex;
  width: 700px;
  height: auto;
  flex-direction: column;
  padding: 30px 15px;
  font: 28px arial;
  box-shadow: 0px 40px 45px rgba(0, 0, 0, .4);
}

div[class*='line'] {
  display: flex;
  justify-content: space-around;
}

div[class*='line'] + div[class*='line'] {
  margin-top: 15px;
}

.line1,
.line3 {
  padding: 0 15px;
}

.line2 {
  padding: 0 30px;
}

div[class*='line'] span {
  box-shadow: 0px 3px 3px rgba(0, 0, 0, .7);
  color: #71D4FE;
  padding: 15px;
  background: #2F3336;
  border-radius: 12px;
  text-shadow: 0px 0px 40px #71D4FE, 0px 0px 80px #71D4FE;
  width: 25px;
  text-align: center;
}

div[class*='line'] span:hover {
  /*   box-shadow: 0px 2px 10px #040404;*/
  
  background: #2F3336;
  text-shadow: 1px 2px 60px #00BCD4, 0px 0px 60px rgba(0, 188, 212, .9), 0px 0px 60px rgba(0, 188, 212, .9), 10px 10px 60px rgba(0, 188, 212, .9);
  cursor: pointer
}

div[class*='line'] span:active {
  transform: scale(.9);
}

.line3 span:first-of-type {
  width: 35px;
  padding: 10px 15px;
}

.line3 span:last-of-type {
  width: 35px;
  padding: 10px 15px;
}

.line4 span:nth-child(1) {
  width: 55px
}

.line4 span:nth-child(2) {
  width: 35px;
  padding: 10px 15px;
}

.line4 span:nth-child(3) {
  width: 35px;
  padding: 10px 15px;
}

.line4 span:nth-child(4) {
  width: 255px
}

.line4 span:last-of-type {
  width: 105px
}

#arrow,
#backspace,
#smile,
#mic {
  fill: #71D4FE;
  width: 35px;
 height:35px;
  -webkit-filter: drop-shadow(0px 2px 20px #71D4FE)
    filter: drop-shadow(0px 2px 20px #71D4FE)
}

#arrow:hover,
#backspace:hover,
#smile:hover,
#mic:hover {
  -webkit-filter: drop-shadow(0px 2px 15px #71D4FE)
    filter: drop-shadow(0px 2px 15px #71D4FE)
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<div class="base">
		<div class="line1">
			<span>Q</span>
			<span>W</span>
			<span>E</span>
			<span>R</span>
			<span>T</span>
			<span>Y</span>
			<span>U</span>
			<span>I</span>
			<span>O</span>
			<span>P</span>
		</div>
		<div class="line2">
			<span>A</span>
			<span>S</span>
			<span>D</span>
			<span>F</span>
			<span>G</span>
			<span>H</span>
			<span>J</span>
			<span>K</span>
			<span>L</span>
		</div>
		<div class="line3">
			<span><svg enable-background="new 0 0 500 500" id="arrow" version="1.1" viewBox="0 0 500 500" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><pa.........完整代码请登录后点击上方下载按钮下载查看