一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情
看下实现的效果
要点
- 透明的键盘，模糊的背景装饰
- 鼠标过按钮时有流动的感觉
- 键盘会晃动
透明键盘实现
关键属性：
background: rgba()backdrop-filter: blur()grid-column/row: span n
这里使用background: rgba来实现透明，但实际还是有点点单独存在的感觉，而不是完全融入在背景中，所以rgba中的值是不能写成 0 。利用透明的效果和 backdrop-filter: blur() 的特性，可以让键盘透过背景达到一个磨砂玻璃的效果。grid-column/row:span n可以让 C和+ 快速实现两个单元格的合并。
//html 结构
<div class="container">
<form name="calc" type="text" class="calculator">
<input type="text" readonly class="value" name="txt">
<span class="num clear" onclick="calc.txt.value = '0'">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>
</div>
// 透明键盘的实现的关键代码
.container{
position: relative;
background: rgba(255, 255, 255, 0.05);
border-radius: 5px;
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 .clear{
grid-column: span 2;
width: 150px;
background: rgba(255, 255, 255, 0.05);
}
.container .calculator .plus{
grid-row: span 2;
height: 150px;
background: rgba(255, 255, 255, 0.05);
}
流动实现
关键属性:
transition
这里实现的关键是保证 :hover 状态下的 transition 时间小于 普通状态,
.container .calculator span{
display: grid;
height: 75px;
width: 75px;
place-items: center;
color: white;
cursor: pointer;
transition: .5s; //
}
.container .calculator span:hover{
transition: 0s;
background: rgba(255, 255, 255, 0.05);
}
键盘会晃动
这里我们可以使用 TiltJs 来实现,下载到本地或使用CDN方式引入,我使用的本地引入, 记得把的body标签的后面.
<script type="text/javascript" src="tilt.js"></script>
<script type="text/javascript" >
VanillaTilt.init(document.querySelector(".calculator"), {
max: 20,
});
</script>
在文档和VanillaTilt.js均有使用方法
{
reverse: false, // reverse the tilt direction
max: 15, // max tilt rotation (degrees)
startX: 0, // the starting tilt on the X axis, in degrees.
startY: 0, // the starting tilt on the Y axis, in degrees.
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
scale: 1, // 2 = 200%, 1.5 = 150%, etc..
speed: 300, // Speed of the enter/exit transition
transition: true, // Set a transition on enter/exit.
axis: null, // What axis should be disabled. Can be X or Y.
reset: true, // If the tilt effect has to be reset on exit.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
glare: false, // if it should have a "glare" effect
"max-glare": 1, // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
"glare-prerender": false, // false = VanillaTilt creates the glare elements for you, otherwise
// you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
"mouse-event-element": null, // css-selector or link to an HTML-element that will be listening to mouse events
"full-page-listening": false, // If true, parallax effect will listen to mouse move events on the whole document, not only the selected element
gyroscope: true, // Boolean to enable/disable device orientation detection,
gyroscopeMinAngleX: -45, // This is the bottom limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the left border of the element;
gyroscopeMaxAngleX: 45, // This is the top limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the right border of the element;
gyroscopeMinAngleY: -45, // This is the bottom limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the top border of the element;
gyroscopeMaxAngleY: 45, // This is the top limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the bottom border of the element;
gyroscopeSamples: 10 // How many gyroscope moves to decide the starting position.
}
