Neumorphism新拟态设计计算器效果代码-html代码-BFW代码库

Neumorphism新拟态设计计算器效果代码

代码语言：html

代码描述：Neumorphism新拟态设计计算器效果代码

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


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

<head>

  <meta charset="UTF-8">

  
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

body {
  background: #e0e0e0;
  font-family: 'Montserrat', sans-serif;
}
.container {
  width: 320px;
  height: 490px;
border-radius: 20px;
border-radius: 18px;
background: #e0e0e0;
box-shadow:  5px 5px 10px #c1c1c1,
             -5px -5px 10px #ffffff;
  margin: 0 auto;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
}
.container .result {
  width: 100%;
  height: 100px;
border-radius: 10px;
border-radius: 18px;
background: #e0e0e0;
box-shadow:  5px 5px 10px #c1c1c1,
             -5px -5px 10px #ffffff;
}
.container .result p {
  font-size: 25pt;
  overflow-y: auto;
  text-align: right;
  color: #00000;
  padding-right: 10px;
  
}

.container .buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
}
.container .buttons .button, .container .buttons .num-button  {
  cursor: grab;
  text-align: center;
  width: 60px;
  font-size:18px;
  height: 60px;
  display: grid;
  place-content: center;
  border-radius: 20px;
border-radius: 18px;
background: #e0e0e0;
box-shadow:  5px 5px 10px #c1c1c1,
             -5px -5px 10px #ffffff;
}
.button:hover{
  color: #3498db;
border-radius: 20px;
background: #d11a1a;
box-shadow:  5px 5px 10px #a31414,
             -5px -5px 10px #ff2020;
 
}

/*  UTILITIES*/
.container .buttons .zero {
  grid-column: 1/ 3;
  width: 100%;
  font-size: 20px;
  color: #00000;
  border-radius: 10px;
border-radius: 18px;
background: #e0e0e0;
box-shadow:  5px 5px 10px #c1c1c1,
             -5px -5px 10px #ffffff;
}

.action-btn {
  color: grey;
  font-weight: bold;
}
.calc-action-btn{
  color: #00000;
  font-size: 60px;
  font-weight: bold;

}
</style>




</head>

<body>
  <!-- partial:index.partial.html -->
  <div class="container">
    <div class="result">
      <p id="result-box">0</p>
    </div>


    <div class="buttons">
      <div class="button action-btn" id="clear"> AC </div>
      <div class="button action-btn"> MC</div>
      <div class="button num-button  action-btn"> %</div>
      <div class="button num-button  calc-action-btn&qu.........完整代码请登录后点击上方下载按钮下载查看