jquery+css实现一个未来感计算器效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery+css实现一个未来感计算器效果代码，先点开关再计算。

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <link href='//fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Play' rel='stylesheet' type='text/css'>
  
  
  
<style>
body {
  font-family: 'Audiowide', cursive;
  color: #7AFFFA;
  background-color: #EDAC52;
  background: url("//repo.bfw.wiki/bfwrepo/image/5e43501a53906.png") no-repeat;
  background-size: cover;
}

.title {
  text-align: center;
  color: #76F0E0;
  text-shadow: rgba(59, 87, 96, 0.35) 0px 1px .3px;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

.calculator-shadow {
  margin: 0 auto;
  width: 310px;
  border-radius: 20px;
  box-shadow: -12px 7px 28px -16px #212D39, -8px 10px 20px -1px #230800;
}

.calculator-body {
  margin: 100px auto;
  height: 450px;
  width: 310px;
  padding: 20px 0 0 0;
  border-radius: 20px;
  cursor: pointer;
  background-color: rgba(56, 209, 255, 0.25);
  box-shadow: inset 0px -1px 9px 4px rgba(34, 53, 85, 0.54);
}

.display-screen {
  height: 60px;
  width: 290px;
  border-radius: 10px;
  margin: 0 auto;
  margin-bottom: 20px;
  border: 1px solid #A79A9A;
  background-color: #30323E;
  box-shadow: inset 0px 0px 16px 1px #070708, 2px 4px 1px 1px rgba(91, 83, 83, 0.76), -2px 4px 1px 1px rgba(91, 83, 83, 0.76);
}

.display-output {
  margin: 0;
  font-size: 30px;
  padding-top: 10px;
  padding-right: 10px;
  text-align: right;
  font-family: 'Play', sans-serif;
  overflow: hidden;
  color: #54FF4F;
}

.keys {
  height: 50px;
  width: 50px;
  margin: 5px;
  border-radius: 10px/40px;
  text-align: center;
  float: left;
  background: linear-gradient(to bottom, rgba(106, 186, 255, 0.35), rgba(56, 209, 255, 0.26), rgba(170, 228, 255, 0.52));
}

.num-keys {
  line-height: 44px;
}

.row1,
.row2,
.row3,
.row4,
.row5 {
  height: 60px;
  width: 240px;
  margin: 0 auto;
}

.bottom-row {
  position: relative;
  margin-right: 6px;
  bottom: 61px;
}

#key0 {
  width: 108px;
}

.on-off {
  font-size: 14px;
  background: linear-gradient(to bottom, rgba(232, 182, 225, 0.65), rgba(221, 145, 211, 0.65), rgba(225, 161, 216, 0.65));
}

.on-off-glow {
  background: linear-gradient(to bottom, rgba(255, 24, 223, 0.65), rgba(211, 19, 255, 0.65), rgba(255, 24, 223, 0.65));
}

.on {
  margin-top: 3px;
  margin-bottom: 0;
}

.off {
  margin-top: 2px;
  margin-bottom: 0;
}

.num-keys-glow {
  background: linear-gradient(to bottom, rgba(48, 255, 247, 0.65), rgba(122, 255, 250, 0.65));
  color: #FFFFFF;
}

#clear-all {
  line-height: 44px;
  background: linear-gradient(to bottom, rgba(42, 246, 36, 0.65), rgba(87, 255, 105, 0.65), rgba(42, 246, 36, 0.65));
}

#enter-button {
  height: 110px;
  background: linear-gradient(to bottom, rgba(50, 120, 255, 0.71), rgba(50, 120, 255, 0.49), rgba(50, 120, 255, 0.71));
}

.enter-text {
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 0;
  color: #7AFFFA;
}

.line-divider {
  height: 1px;
  width: 35px;
  margin: 0 auto;
  margin-top: 1px;
  background-color: #7AFFFA;
}

.battery-life {
  height: 6px;
  width: 80px;
  margin: -10px 0 5px 12px;
  background-color: rgba(39, 57, 64, 0.51);
  box-shadow: inset 0px 0px 1px 1px rgba(56, 209, 255, 0.26);
}

.flash {
  display: none;
  height: 6px;
  width: 80px;
  margin: -10px 0 5px 12px;
  background-color: rgba(39, 57, 64, 0.51);
  -webkit-animation: flash .5s infinite;
  -moz-animation: flash .5s infinite;
  -o-animation: flash .5s infinite;
  ;
  animation: flash .5s infinite;
}

@keyframes flash {
  1% {
    background: linear-gradient(to right, #FF1515, #DB9112);
  }
  10% {
    background: linear-gradient(to right, #DB9112, #00FF0E)
  }
  100% {
    background: linear-gradient(to right, #FF1515, #DB9112, #00FF0E);
  }
}
</style>



</head>

<body >
  <div class="calculator-shadow">
  <div class="calculator-body">

    <p class="title">CALCULATOR</p>

    <div class="display-screen">
      <p class="display-output" id="display-output"></p>
    </div>

    <div class="battery-life"></div>
    <div class="flash" id="flash"><.........完整代码请登录后点击上方下载按钮下载查看