9.15好玩的

不知谁会看我博客，但是既然你瞧见了，我就分享一个小东西

之前刷抖音偶然发现的一个

叫什么创意登录框

反正我觉得挺好玩

至于代码到底可行不可行，待我明天后天试试之后再给出答案

（因为我web还没学太多。。）

但是看人家评论区 “真正成功的产品应该是连傻子都会用”

但是emmmmm，我这也不是产品 啊哈哈哈

代码：

const button = document.querySelector('button');
const distanceBetween = (p1x, p1y, p2x, p2y) =>{
    const dx = p1x - p2x;
    const dy = p1y - p2y;
    return Math.sqrt(dx * dx + dy * dy);
};
document.addEventListener('mousemove'，(event) =>{
    if (document.querySelector('input[name = "password"]').value&&
        document.querySelector('input[name = "username"]').value){
        return;
        }
    const radius = Math.max(button.offsetWidth * 0.75,         
                                         button.offsetHeight * 0.75, 100);

    const bx = button.parentNode.offsetLeft + 
                    button.offsetLeft + button.offsetWidth / 2;
    const bx = button.parentNode.offsetTop + 
                    button.offsetTop + button.offsetHeight / 2;
    
    const dist = distanceBetween(event.clientX, event.clientY, bx, by) * 2;
    const angle = Math.atan2(event.clientY - by, event. clientX - bx);

    const ox = -1 * Math.cos(angle) * Math.max((radius - dist), 0);
    const oy = -1 * Math.sin(angle) * Math.max((radius - dist), 0);

    const rx = oy / 2;
    const ry = -ox / 2;

    button.style.transition = 'all 0.1s ease';
    button.style.transform = 'translate(${ox}px, ${oy}px)
                                        rotateX(${rx}deg rotateY(${ry}deg)';
    button.style.boxShadow = '0px ${Math.abs(oy)}px ${Math.abs(oy) / radius * 40}px rgba(0,0,0,0.15)';
});

 这点破代码，手敲废我好长时间啊我去

有必要再练练指法了。。

确定了，这个是JavaScript语言，注释如下（拉满了拉满了，真的拉满了），源代码如上

有兴趣的小伙伴可以试着解读一下，看看人家大神的思路

学到就是赚到

//通过`document.querySelector('button')`获取到页面中的一个按钮元素，并将其赋值给变量`button`。
const button = document.querySelector('button');

//定义了一个函数`distanceBetween`，用来计算两个点之间的距离。
//函数接受4个参数：`p1x`、`p1y`、`p2x`、`p2y`，分别是两个点的坐标。函数内部通过使用勾股定理来计算两点之间的距离，并返回结果。 
const distanceBetween = (p1x, p1y, p2x, p2y) =>{
    const dx = p1x - p2x;
    const dy = p1y - p2y;
    return Math.sqrt(dx * dx + dy * dy);
};

//使用`document.addEventListener('mousemove', (event) => {...})`添加了一个`mousemove`事件监听器。当鼠标在页面上移动时，会执行后面的箭头函数。
document.addEventListener('mousemove',(event) =>{

    //在事件处理程序中，使用条件语句来检查密码输入框和用户名输入框是否都有值。如果有值，就立即返回（意味着不执行后续的代码）。
    if (document.querySelector('input[name = "password"]').value&&document.querySelector('input[name = "username"]').value){
        return;
    }

    //计算出按钮的半径，采用了按钮宽度和高度的0.75倍与100之间的最大值作为半径。
    const radius = Math.max(button.offsetWidth * 0.75,button.offsetHeight * 0.75, 100);

    //计算出按钮相对于文档左上角的位置坐标（以像素为单位），分别使用`offsetLeft`和`offsetTop`来获取按钮在父元素中的偏移量，并加上按钮自身宽度和高度的一半。
    const bx = button.parentNode.offsetLeft +button.offsetLeft + button.offsetWidth / 2;
    const by = button.parentNode.offsetTop +button.offsetTop + button.offsetHeight / 2;

    //计算出鼠标位置与按钮中心的距离（dist）和鼠标位置和按钮中心之间的角度（angle）。距离的计算通过调用上面定义的`distanceBetween`函数来实现。
    const dist = distanceBetween(event.clientX, event.clientY, bx, by) * 2;
    const angle = Math.atan2(event.clientY - by, event. clientX - bx);

    //根据距离和角度计算出按钮在水平和垂直方向上的偏移量（ox和oy）
    //设置偏移量的公式为 `-1 * Math.cos(angle) * Math.max((radius - dist), 0)` 和 `-1 * Math.sin(angle) * Math.max((radius - dist), 0)`。
    const ox = -1 * Math.cos(angle) * Math.max((radius - dist), 0);
    const oy = -1 * Math.sin(angle) * Math.max((radius - dist), 0);

    //根据水平和垂直方向的偏移量计算旋转角度，在这里将水平偏移量`oy`除以2赋值给`rx`，`-ox`除以2赋值给`ry`。
    const rx = oy / 2;
    const ry = -ox / 2;

    //设置按钮的过渡效果，即当按钮样式改变时，以0.1秒的动画过渡效果进行平滑过渡。
    button.style.transition = 'all 0.1s ease';

    //设置按钮的变换效果，即根据水平和垂直方向的偏移量和旋转角度进行`translate`和`rotate`变换，并使用模板字符串进行插值。
    button.style.transform = 'translate(${ox}px, ${oy}px)rotateX(${rx}deg rotateY(${ry}deg)';

    //设置按钮的阴影效果，根据垂直方向的偏移量动态调整阴影的位置和大小，并使用模板字符串进行字符串拼接，生成阴影效果的CSS样式。
    button.style.boxShadow = '0px ${Math.abs(oy)}px ${Math.abs(oy) / radius * 40}px rgba(0,0,0,0.15)';
    
});