特效描述:利用css3实现 弹性果冻按钮 动画特效。利用css3实现弹性果冻按钮动画特效
代码结构
1. HTML代码
var boxes = document.querySelectorAll('#boxes > div');
[].forEach.call(boxes, box => {
box.addEventListener('mousemove', e => {
document.body.style.setProperty(
'--bg-color',
box.style.getPropertyValue('--color')
);
var size = parseInt(getComputedStyle(box).width);
// scaling
var x = size * .3 * .7 + .7 * e.offsetX;
var y = size * .3 * .7 + .7 * e.offsetY;
box.style.setProperty('--x', x);
box.style.setProperty('--y', y);
box.style.setProperty('--size', size);
});
});