bootstrap布局模拟apple苹果电脑中性拟态键盘悬浮效果代码-html代码-BFW代码库

代码语言：html

代码描述：bootstrap布局模拟apple苹果电脑中性拟态键盘悬浮效果代码,配合了vanilla-tilt实现按下凹进去的效果。

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
    
    body {
  background: #eee;
  margin: 0;
  padding: 0;
  font-family: "Kanit", sans-serif;
}
.vertical-line {
  border-left: 5px solid rgba(0, 0, 0, 0.3);
  height: 200px;
  position: fixed;
  left: 50%;
  margin-left: -3px;
  top: 0;
  z-index: -1;
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.3);
}
.container {
  margin-top: 5%;
  border-radius: 0;
  padding-bottom: 50px;
  padding-top: 20px;
  padding-left: 70px;
  padding-right: 70px;
  background: #eee;
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001, inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001, inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001;
  transition: 0.4s;
  transform: scale(0.9);
}
.neu-shadow {
  background: #eee;
  user-select: none;
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001, inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001, inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001;
  cursor: pointer;
  font-size: 20px;
  transition: 0.4s;
}
.neu-shadow:hover {
  box-shadow: 0px 0px 0px 0px #fff9, 0px 0px 0px 0px #fff9, 0px 0px 0px 0px #0001, 0px 0px 0px 0px #0001, inset -7px -7px 20px 0px #fff9, inset -4px -4px 5px 0px #fff9, inset 7px 7px 20px 0px #0003, inset 4px 4px 5px 0px #0001;
  transition: 0.2s;
}
.neu-shadow p {
  margin-top: 10px;
  color: #9f9f9f;
}
.spinner-grow {
  background: #9f9f9f;
  border-radius: 50% !important;
  animation-duration: 2s;
  height: 10px;
  width: 10px;
}
.lights-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: nowrap column;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<!--Bootstrap v4-->
<div class="vertical-line"></div>
<div class="container scale">
  <div class="lights-wrapper"><img src="//repo.bfw.wiki/bfwrepo/icon/64dd476b06e2c.png" width="30" alt=""/>
    <div class="spinners"><span class="spinner-grow text-success"></span><span class="spinner-grow text-success"></span><span class="spinner-grow text-success"></span></div>
  </div>
  <div class="cos">
    <div class="row text-center mt-4 xls">
      <div class="col-sm-1 text-white neu-shadow">
        <p>Esc</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>F1</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>F2</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>F3</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>F4</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>F5</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>F6</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>F7</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>F8</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>Num</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>Src</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p><img class="img-fluid" src="//repo.bfw.wiki/bfwrepo/icon/64dd477827dbe.png" alt="" width="25"/></p>
      </div>
    </div>
    <div class="row text-center mt-2 xls">
      <div class="col-sm-1 text-white neu-shadow">
        <p>1</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>2</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>3</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>4</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>5</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>6</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>7</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>8</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>Back</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>7</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        <p>8</p>
      </div>
      <div class="col-sm-1 text-white neu-shadow">
        &.........完整代码请登录后点击上方下载按钮下载查看