【Ten Mins Effect】 - 04 3D 毛玻璃计算器效果

效果展示

大家好，这里是初心Yearth，欢迎来到 10 mins css，每天花 10 分钟，实现要给简单精美的 css 效果。

那么下面我们直接进入正题，先来看看今天的效果展示吧：

分析

这次的效果看起来蛮炫酷的， 接下来我们便来分析一下，想要实现这个效果，有哪些关键点。

其实仔细观察一番之后，不难看出，效果的实现有以下几点需要注意：

• 背景
• 计算器整体布局
• 计算器毛玻璃效果
• 计算器按钮响应效果
• 计算器 3D 效果

接下来我们一一分析一番。

背景

其实实现这个背景的方法很多，最简单的比如直接使用一张背景图，这里我们使用稍微复杂一些的方法：linear-gradient + clip-path 。

看到这两个属性，相信大家已经明白思路了：

• 给 body 设定最底层的背景色
• 分别将 before 和 after 铺在上面，用 linear-gradient 为其设定背景色
• 用 clip-path 将其分别裁出两个圆

按照思路直接实现代码即可：

:root {
  --bg-color: #091921;
  --bg-before-color: linear-gradient(#e91e63, #ffc107);
  --bg-after-color: linear-gradient(#ffffff, #da00ff);
}
body {
  background: var(--bg-color);
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-before-color);
  clip-path: circle(22% at 30% 20%);
}

body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-after-color);
  clip-path: circle(20% at 70% 90%);
}

效果如下：

计算器整体布局

首先我们实现计算器的 html 结构，通过观察可以看到，整个计算器分为两部分：

• 输出结果的展示框
• 输入参数的按钮，其中 clear 和 plus 按键相对特殊

那么整体结构如下所示：

<section class="container">
  <form class="calculator" name="calc">
    <input type="text" class="value" readonly name="txt" />
    <span class="num clear" onclick="calc.txt.value = ''">c</span>
    <span class="num" onclick="calc.txt.value += '/'">/</span>
    <span class="num" onclick="calc.txt.value += '*'">*</span>
    <span class="num" onclick="calc.txt.value += '7'">7</span>
    <span class="num" onclick="calc.txt.value += '8'">8</span>
    <span class="num" onclick="calc.txt.value += '9'">9</span>
    <span class="num" onclick="calc.txt.value += '-'">-</span>
    <span class="num" onclick="calc.txt.value += '4'">4</span>
    <span class="num" onclick="calc.txt.value += '5'">5</span>
    <span class="num" onclick="calc.txt.value += '6'">6</span>
    <span class="num plus" onclick="calc.txt.value += '+'">+</span>
    <span class="num" onclick="calc.txt.value += '1'">1</span>
    <span class="num" onclick="calc.txt.value += '2'">2</span>
    <span class="num" onclick="calc.txt.value += '3'">3</span>
    <span class="num" onclick="calc.txt.value += '0'">0</span>
    <span class="num" onclick="calc.txt.value += '00'">00</span>
    <span class="num" onclick="calc.txt.value += '.'">.</span>
    <span class="num" onclick="calc.txt.value = eval(calc.txt.value)">=</span>
  </form>
</section>

而要实现网格的排列，最方便的布局自然是 grid，其中 clear 和 plus 单独设定即可：

.container {
  position: relative;
  z-index: 10;
  border: 1px solid #fff;
}

.container .calculator {
  display: grid;
}

.container .calculator .value {
  grid-column: span 4;
  height: 140px;
  width: 300px;
  background: transparent;
}

.container .calculator span {
  display: grid;
  height: 75px;
  width: 75px;
  border: 1px solid #fff;
}

效果如下：

接下来我们优化一下细节：

• 计算器的阴影
• 计算器边框弧度
• 文本的位置、颜色和大小等等（tip：通过 place-items 可以快速将文本放在预期的位置）
• 展示框和各个按钮之间的边框

:root {
  --container-border: 1px solid rgba(255, 255, 255, 0.2);
  --container-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
  --container-value-border: 1px solid rgba(255, 255, 255, 0.05);
  --container-value-color: #ffffff;
}

.container {
  position: relative;
  border-radius: 6px;
  z-index: 10;
  border-top: var(--container-border);
  border-left: var(--container-border);
  box-shadow: var(--container-shadow);
}

.container .calculator {
  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: var(--container-value-color);
  border-right: var(--container-value-border);
  border-bottom: var(--container-value-border);
}

.container .calculator span {
  display: grid;
  place-items: center;
  height: 75px;
  width: 75px;
  color: var(--container-value-color);
  font-weight: normal;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  border-right: var(--container-value-border);
  border-bottom: var(--container-value-border);
}

.container .calculator .clear {
  background: var(--container-value-clear-bg-color);
  grid-column: span 2;
  width: 150px;
}

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

效果如下：

计算器毛玻璃效果

要实现毛玻璃效果的关键有两点：

• 半透明的背景色
• backdrop-filter: blur()

这里我们为 container 加上这两个属性即可：

:root {
  --container-bg-color: rgba(255, 255, 255, 0.05);
}

.container {
  background: var(--container-bg-color);
  backdrop-filter: blur(15px);
}

效果如下：

计算器按钮响应效果

这个其实没什么好说，分别设定 hover 和 active 即可：

:root {
  --container-value-hover-bg-color: rgba(255, 255, 255, 0.05);
  --container-value-active-color: #192f00;
  --container-value-active-bg-color: #14ff47;
  --container-value-clear-bg-color: rgba(255, 255, 255, 0.05);
}

.container .calculator span {
  transition: 0.5s;
}

.container .calculator span:hover {
  transition: 0s;
  background: var(--container-value-hover-bg-color);
}

.container .calculator span:active {
  color: var(--container-value-active-color);
  background: var(--container-value-active-bg-color);
  font-size: 24px;
  font-weight: 500;
}

效果如下：

计算器 3D 效果

至于计算器跟随鼠标翻动的 3D 效果，借助一个外部库就可以很轻松的实现：vanilla-tilt。

<script type="text/javascript">
  VanillaTilt.init(document.querySelector(".container"), {
    max: 15,
    speed: 400,
    glare: true,
    "max-glare": 0.2
  });
</script>

感兴趣的读者可以看看这个效果的在线 demo：3D 毛玻璃计算器效果