效果展示
页面结构组成
从上述的效果可以看出，计算机的页面比较规整，适合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,
});
完整代码下载
完整代码下载
