今天发现我的键盘很好看,用代码还原一下

xiyee
86 阅读5分钟

键盘.gif

image.png

image.png

html代码如下:

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./font_3334186_vjqpyyocci/iconfont.css">
  <link rel="stylesheet" href="./我的键盘.css">
  <style>

  </style>
</head>

<body>
  <div class="keyboard-left">
    <!-- 第一行 -->
    <div class="first-row">
      <div class="Esc">
        <h3>Esc</h3>
        <p>Fnkock</p>
      </div>
      <!-- 中间F1-Prtsc -->
      <ul class="shortcut"></ul>
      <li class="F1">
        <h4>F1</h4>
        <i class="iconfont icon-24gl-volumeCross
        "></i>
      </li>
      <li class="F2">
        <h4>F2</h4>
        <i class="iconfont icon-yinliangjianxiao"></i>
      </li>
      <li class="F3">
        <h4>F3</h4>
        <i class="iconfont icon-yinliangjianxiao"></i>
      </li>
      <li class="F4">
        <h4>F4</h4>
        <i class="iconfont icon-chakanxiansuo
        "></i>
      </li>
      <li class="F5">
        <h4>F5</h4>
        <i class="iconfont icon-svgf4
        "></i>
      </li>
      <li class="F6">
        <h4>F6</h4>
        <i class="iconfont icon-unie6f6
        "></i>
      </li>
      <li class="F7">
        <h4>F7</h4>
        <i class="iconfont icon-mobankuangjia
        "></i>
      </li>
      <li class="F8">
        <h4>F8</h4>
        <i class="iconfont icon-feiji
        "></i>
      </li>
      <li class="F9">
        <h4>F9</h4>
        <i class="iconfont icon-xingxing
        "></i>
      </li>
      <li class="F10">
        <h4>F10</h4>
        <i class="iconfont icon-shejiyukaifa-
        "></i>
      </li>
      <li class="F11">
        <h4>F11</h4>
        <i class="iconfont icon-bijiben
        "></i>
      </li>
      <li class="F12">
        <h4>F12</h4>
        <i class="iconfont icon-jisuanqilishuai
        "></i>
      </li>
      <li class="Insert">
        <h4>Insert</h4>
      </li>
      <li class="Prtsc">
        <h4>Prtsc</h4>
        <i class="iconfont icon-jianqie
        "></i>
      </li>
      </ul>
      <!-- 中间结束 -->
      <div class="Delete">
        <h4>Delete</h4>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="second-row">
      <div class="quote">
        <p>~</p>
        <p>`</p>
      </div>
      <ul class="number">
        <li>
          <p>!</p>
          <p>1</p>
        </li>
        <li>
          <p>@</p>
          <p>2</p>
        </li>
        <li>
          <p>#</p>
          <p>3</p>
        </li>
        <li>
          <p>$</p>
          <p>4</p>
        </li>
        <li>
          <p>%</p>
          <p>5</p>
        </li>
        <li>
          <p>^</p>
          <p>6</p>
        </li>
        <li>
          <p>&</p>
          <p>7</p>
        </li>
        <li>
          <p>*</p>
          <p>8</p>
        </li>
        <li>
          <p>(</p>
          <p>9</p>
        </li>
        <li>
          <p>)</p>
          <p>0</p>
        </li>
        <li>
          <p>-</p>
          <p>_</p>
        </li>
        <li>
          <p>+</p>
          <p>=</p>
        </li>
      </ul>
      <div class="Backspace">
        <p>Backspace</p>
      </div>
    </div>
    <!-- 第三行 -->
    <div class="third-row">
      <div class="Tab">
        <p>Tab</p>
      </div>
      <ul class="words">
        <li>
          <P>Q</P>
        </li>
        <li>
          <P>W</P>
        </li>
        <li>
          <P>E</P>
        </li>
        <li>
          <P>R</P>
        </li>
        <li>
          <P>T</P>
        </li>
        <li>
          <P>Y</P>
        </li>
        <li>
          <P>U</P>
        </li>
        <li>
          <P>I</P>
        </li>
        <li>
          <P>O</P>
        </li>
        <li>
          <P>P</P>
        </li>
        <li>
          <P>{</P>
          <P>[</P>
        </li>
        <li>
          <P>}</P>
          <P>]</P>
        </li>
        <li>
          <P>|</P>
          <P>\</P>
        </li>
      </ul>
    </div>
    <!-- 第四行 -->
    <div class="fourth-row">
      <div class="CapsLock">
        <p>Caps Lock</p>
      </div>
      <ul class="words">
        <li>
          <p>A</p>
        </li>
        <li>
          <p>S</p>
        </li>
        <li>
          <p>D</p>
        </li>
        <li>
          <p>F</p>
        </li>
        <li>
          <p>G</p>
        </li>
        <li>
          <p>H</p>
        </li>
        <li>
          <p>J</p>
        </li>
        <li>
          <p>K</p>
        </li>
        <li>
          <p>L</p>
        </li>
        <li>
          <p>:</p>
          <p>;</p>
        </li>
        <li>
          <p>"</p>
          <p>'</p>
        </li>
      </ul>
      <div class="Enter">
        <p>Enter</p>
      </div>
    </div>
    <!-- 第五行 -->
    <div class="fifth-row">
      <div class="Shift">
        <p>Shift</p>
      </div>
      <ul class="words">
        <li>
          <p>Z</p>
        </li>
        <li>
          <p>X</p>
        </li>
        <li>
          <p>C</p>
        </li>
        <li>
          <p>V</p>
        </li>
        <li>
          <p>B</p>
        </li>
        <li>
          <p>N</p>
        </li>
        <li>
          <p>M</p>
        </li>
        <li>
          <p> < </p>
          <p> , </p>
        </li>
        <li>
          <p> > </p>
          <p> . </p>
        </li>
        <li>
          <p> ? </p>
          <p> / </p>
        </li>
      </ul>
      <div class="Shift-right">
        <p>Shift</p>
      </div>
    </div>
    <!-- 第六行 -->
    <div class="six-row">
      <ul class="words">
        <li>
          <p>Ctrl</p>
        </li>
        <li>
          <p>Fn</p>
        </li>
        <li>
          <i class="iconfont icon-windows"></i>
        </li>
        <li>
          <p>Alt</p>
        </li>
        <li>
          <i class="iconfont icon-xingxing"></i>
          <i class="iconfont icon-xingxing"></i>
          <i class="iconfont icon-xingxing"></i>
          <i class="iconfont icon-xingxing"></i>
        </li>
        <li>
          <p>Alt</p>
        </li>
        <li>
          <p>Ctrl</p>
        </li>
      </ul>
      <div class="arrows">
        <div class="arrows-top">
          <i class="iconfont icon-jiantou_xiangshang
          "></i>
        </div>
      </div>
    </div>
    <!-- 第七行 -->
    <div class="seven-row">
      <div class="arrows">
          <i class="iconfont icon-jiantou_xiangzuo
          "></i>
          <i class="iconfont icon-jiantou_xiangxia
          "></i>
          <i class="iconfont icon-jiantou_xiangyou
          "></i>
  </div>
</body>

</html>

css代码如下:

  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
.keyboard-left {
  position: relative;
  padding: 10px;
  margin: 100px auto;
  overflow: hidden;
  width: 1200px;
  border: 1px solid #fff;
  background-color: skyblue;
  color: #fff;
}
.first-row {
  display: flex;
  justify-content: space-evenly;
}
.first-row .Esc ,
.Delete{
  padding: 3px;
  width: 100px;
  height: 50px;
  border: 1px solid #fff;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards;
}
.first-row .shortcut {
  flex: 1 ;
}
.first-row li {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px 5px 5px;
  width: 70px;
  border: 1px solid #fff;
  border-radius: 10px;
  margin-right: 10px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards;
} 
.first-row li h4 {
  font-size: 14px;
  font-weight: 400;
}
.first-row li i {
  align-self: flex-end;
}
.first-row .Esc{
  margin-right: 10px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards;
}
.first-row .Esc p{
  font-size: 12px;
}
.first-row .Esc h3 {
  font-weight: 400;
}
.first-row .Delete h4{
  font-weight: 400;
  text-align: center;
}
/* 第一行结束 */

/* 第二行开始 */
.second-row {
  margin-top: 15px;
  display: flex;
  justify-content: space-evenly;
  
}
.second-row .quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px;
  width: 50px;
  height: 70px;
  border: 1px solid #fff;
  border-radius: 10px;
  font-size: 20px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards;
}
.second-row .number {
  display: flex;
  justify-content: space-evenly;
  flex: 1;
}
.second-row .number li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px;
  width: 70px;
  height: 70px;
  border: 1px solid #fff;
  border-radius: 10px;
  font-size: 20px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards;
}
.second-row .Backspace {
  width: 120px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards;
}
/* 第二行结束 */

/* 第三行开始 */
.third-row {
  display: flex;
  margin-top: 15px;
}
.third-row .Tab {
  margin-right: 15px;
  padding-left: 10px;
  width: 100px;
  height: 70px;
  line-height: 70px;
  border: 1px solid #fff;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards;
}
.third-row .words {
  display: flex;
  justify-content: space-between;
  flex: 1;
}
.third-row .words li {
  padding: 5px;
  width: 70px;
  height: 70px;
  border: 1px solid #fff;
  border-radius: 10px;
  font-size: 20px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards;
}
.third-row .words li:nth-of-type(n+11) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom:10px;
  padding-left:10px ;
  font-size: 2px;
}
/* 第三行结束 */
/* 第四行开始 */
.fourth-row{
  display: flex;
  margin-top: 15px;
}
.fourth-row .CapsLock {
  width: 120px;
  height: 70px;
  line-height: 70px;
  padding-left: 10px;
  border: 1px solid #fff;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards;
}
.fourth-row .words {
  display: flex;
  justify-content: space-evenly;
  flex: 1;
}
.fourth-row .words li {
  padding: 5px;
  width: 70px;
  height: 70px;
  border: 1px solid #fff;
  border-radius: 10px;
  font-size: 20px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards;
}
.fourth-row .words li:nth-of-type(n+10) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left:10px ;
}
.fourth-row .Enter {
  width: 120px;
  height: 70px;
  line-height: 70px;
  text-align: end;
  padding-right: 10px;
  border: 1px solid #fff;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards,bgcolor 3s forwards;
}
/* 第四行结束 */
/* 第五行开始 */
.fifth-row {
  display: flex;
  margin-top: 15px;
}
.fifth-row .Shift {
  width: 150px;
  height: 70px;
  line-height: 70px;
  padding-left: 10px;
  border: 1px solid #fff;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards;
}
.fifth-row .words {
  display: flex;
  justify-content: space-evenly;
  flex: 1;
}
.fifth-row .words li {
  padding: 5px;
  width: 70px;
  height: 70px;
  border: 1px solid #fff;
  border-radius: 10px;
  font-size: 20px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards;
}
.fifth-row .words li:nth-of-type(n+8) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left:10px ;
}
.fifth-row .Shift-right {
  width: 150px;
  height: 70px;
  line-height: 70px;
  text-align: end;
  padding-right: 10px;
  border: 1px solid #fff;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards;
}
/* 第五行结束 */
/* 第六行开始 */
.six-row {
  display: flex;
  margin-top: 15px;
}
.six-row .words {
  display: flex;
  justify-content: space-between;
  flex: 1;
}
.six-row .words li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  width: 70px;
  height: 70px;
  border: 1px solid #fff;
  border-radius: 10px;
  font-size: 18px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards;
}
.six-row .words li:nth-child(3) i{
  font-size: 40px;
}
.six-row .words li:nth-child(5){
  display: flex;
  justify-content: space-evenly;
  padding-left: 30px;
  width: 450px;
  animation: bgcolor 3s forwards;
}
.six-row .words li:nth-child(5) i {
  font-size: 40px;
}
.six-row .arrows {
  display: flex;
  justify-content: center;
  margin-left: 15px;
  width: 240px;
  height: 70px;
}
.six-row .arrows .arrows-top{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  border: 1px solid #fff;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards,bgcolor 3s forwards;
 
}
.six-row .arrows .arrows-top i {
  font-size: 30px;
}
/* 第六行结束 */
/* 第七行开始 */
.seven-row {
  display: flex;
  justify-content: flex-end;
}
.seven-row .arrows {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  width: 240px;
  height: 70px;
  line-height: 70px;
  border-radius: 10px;
  text-align: center ;
}
.seven-row .arrows i {
  width: 70px;
  height: 70px;
  border: 1px solid #fff;
  border-radius: 10px;
  font-size: 30px;
  box-shadow: 5px 5px 5px rgb(192, 236, 255);
  animation: shadowColor 3s linear forwards ,bgcolor 3s forwards;
  
}
.flash {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5),hsla(0,0%,100%,0));
  transform: skew(20deg);
  animation: move 3s forwards ;
}
.third-row .words li:nth-child(2),
.fourth-row .words li:nth-child(1),
.fourth-row .words li:nth-child(2),
.fourth-row .words li:nth-child(3){
  animation: bgcolor 3s forwards;
}
@keyframes  move {
  from {
    transform: skew(20deg) translateX(-100%);
  }
  to {
    transform:skew(20deg)  translateX(100%);
  }
}
@keyframes shadowColor {
  from {
    
  }
  to {
    color: #cff9cc;
    box-shadow: 5px 5px 5px pink;
  }
}
@keyframes bgcolor {
  from {
    
  }
  to {
    background-image: linear-gradient( #F1CA74, #A64DB6);
  }
}
avatar
文章
阅读
粉丝