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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看