Glassmorphism 计算器

效果展示

毛玻璃计算器.png

页面结构组成

从上述的效果可以看出，计算机的页面比较规整，适合grid布局。

CSS3 知识点

• grid 布局

实现计算机布局

<div class="container">
  <form class="calculator" name="calc">
    <input type="text" readonly class="value" name="txt" />
    <span class="num clear" onclick="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 plus" 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" onclick="document.calc.txt.value += '='">=</span>
  </form>
</div>

.container {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  overflow: hidden;
  z-index: 10;
  backdrop-filter: blur(15px);
  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.2);
}

.container .calculator {
  position: relative;
  display: grid;
}

.container .calculator .value {
  grid-column: span 4;
  height: 140px;
  width: 300px;
  text-align: right;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 30px;
  background: transparent;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.container .calculator span {
  display: grid;
  place-items: center;
  width: 75px;
  height: 75px;
  color: #fff;
  font-weight: 400;
  cursor: pointer;
  font-size: 20px;
  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;
}

/* 使用 grid-column 和 grid-row 进行单元格合并 */
.container .calculator .clear {
  grid-column: span 2;
  width: 150px;
  background: rgba(255, 255, 255, 0.05);
}

.container .calculator .plus {
  grid-row: span 2;
  height: 150px;
}

.container .calculator .equal {
  background: rgba(255, 255, 255, 0.05);
}

使用VanillaTilt工具函数让计算器随鼠标旋转

计算器会这鼠标的位置进行旋转，我们采用VanillaTilt工具来帮我们实现。

VanillaTilt.init(document.querySelector(".container"), {
  max: 25,
  speed: 400,
});

完整代码下载

完整代码下载