十分钟实现炫酷透明计算器，CSS3+JavaScript实现3D炫酷计算器

AlbertYang

发布于 2020-12-29 10:10:35

5570

发布于 2020-12-29 10:10:35

文章被收录于专栏：AlbertYang的编程之路

今天带大家实现了一个炫酷的透明计算器，实现的过程中需要用到

vanillatiltjs，一个平滑的3D倾斜javascript库，具体的使用和下载地址如下：

https://micku7zu.github.io/vanilla-tilt.js/

具体实现代码如下：

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>炫酷透明计算器：公众号AlbertYang</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="containter">
      <form class="calculator" name="calc">
        <input type="text" name="txt" class="value" readonly="readonly" />
        <span class="num clear" onclick="document.calc.txt.value = ''">C</span>
        <span class="num" onclick="document.calc.txt.value += '/'">/</span>
        <span class="num" onclick="document.calc.txt.value += '*'">*</span>
        <span class="num" onclick="document.calc.txt.value += '7'">7</span>
        <span class="num" onclick="document.calc.txt.value += '8'">8</span>
        <span class="num" onclick="document.calc.txt.value += '9'">9</span>
        <span class="num" onclick="document.calc.txt.value += '-'">-</span>
        <span class="num" onclick="document.calc.txt.value += '4'">4</span>
        <span class="num" onclick="document.calc.txt.value += '5'">5</span>
        <span class="num" onclick="document.calc.txt.value += '6'">6</span>
        <span class="num" onclick="document.calc.txt.value += '+'">+</span>
        <span class="num" onclick="document.calc.txt.value += '1'">1</span>
        <span class="num" onclick="document.calc.txt.value += '2'">2</span>
        <span class="num" onclick="document.calc.txt.value += '3'">3</span>
        <span class="num" onclick="document.calc.txt.value += '0'">0</span>
        <span class="num" onclick="document.calc.txt.value += '00'">00</span>
        <span class="num" onclick="document.calc.txt.value += '.'">.</span>
        <span class="num equal" onclick="document.calc.txt.value  = eval(document.calc.txt.value)">=</span>
      </form>
    </div>
    <script type="text/javascript" src="vanilla-tilt.js"></script>
    <script type="text/javascript">
      VanillaTilt.init(document.querySelector(".containter"), {
        max: 15,
        speed: 400,
        glare: true,
        "max-glare": 0.05,
        easing: "cubic-bezier(.03,.98,.52,.99)"
      });
</script>
  </body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: darkslateblue;
}
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#e91e63, #ffc107);
  clip-path: circle(20% at 30% 20%);
}
body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#ffffff, #da00ff);
  clip-path: circle(20% at 70% 90%);
}
.containter {
  position: relative;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  overflow: hidden;
  z-index: 100;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
}
.containter .calculator {
  position: relative;
  display: grid;
}
.calculator .value {
  grid-column: span 4;
  height: 150px;
  width: 320px;
  text-align: center;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 20px;
  background-color: transparent;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.calculator span {
  display: grid;
  place-items: center;
  height: 80px;
  width: 80px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  transition: 0.5s;
}
.calculator span:hover {
  background: rgba(255, 255, 255, 0.05);
  transition: 0s;
}
.calculator span:active {
  background: #00bcd4;
  color: black;
  font-size: 24px;
  font-weight: 600;
}
.calculator .equal,
.calculator .clear {
  grid-column: span 2;
  width: 160px;
  background: rgba(255, 255, 255, 0.05);
}