后端开发也能写出这么有意思的东西？

最终效果

台球桌布局

html代码

<div class="wrapper">
    <div class="container">
        <div class="desktop">
            <div class="kd"></div>
            <div class="kd"></div>
            <div class="kd"></div>
            <div class="kd"></div>
            <div class="kd"></div>
            <div class="kd"></div>
            <div class="black-ball ball-shadow">8</div>
        </div>
    </div>
    <div class="pole"></div>
</div>

css布局,使用flex布局实现水平垂直居中效果

.wrapper{
    display: flex;
    height: 100vh;
    width: 100%;
    position: relative;
}
.container{
    width: 800px;
    margin: auto;
    height: 400px;
    border-radius: 30px;
    background-color: #999;
    display: flex;
    box-shadow: 10px 10px 5px #e0e0e0;
}
.desktop{
    width: 740px;
    height: 340px;
    margin: auto;
    background-color: green;
    overflow: hidden;
    position: relative;
}

桌面6个口袋的布局，使用绝对定位

.kd{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
}
.kd:nth-child(1){
    top: -30px;
    left: -30px;
}
.kd:nth-child(2){
    width: 50px;
    height: 50px;
    top: -25px;
    left: 50%;
    margin-left: -25px;
}
.kd:nth-child(3){
    top: -30px;
    right: -30px;
}

.kd:nth-child(4){
    bottom: -30px;
    left: -30px;
}
.kd:nth-child(5){
    width: 50px;
    height: 50px;
    bottom: -25px;
    left: 50%;
    margin-left: -25px;
}
.kd:nth-child(6){
    bottom: -30px;
    right: -30px;
}

动画实现

这里只介绍球滚动的动画（非3D滚动）

.ball-move{
    animation: roll infinite linear 0.02s;
}
@keyframes roll {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

动效实现球的滚动和反弹

const move = (e,left) =>{
    let top = ball.offsetTop;
    let x = e.clientX;
    let y = e.clientY;
    ball.classList.add('ball-move')
    ball.classList.remove('ball-shadow')
    let deg = Math.atan2(x-left, y-top) / Math.PI * 180;
    let js = 0;
    let t0 = 0;
    let timer = window.setInterval(()=>{
        js++;
        if(js >= t*frame){
            ball.classList.remove('ball-move')
            ball.classList.add('ball-shadow')
            window.clearInterval(timer);
        }
        let tt = js/frame;
        l = v0*tt+0.5*(a*tt*tt);
        let all = left+l;
        if(all > desktop.offsetWidth){
            if(t0 == 0){
                //记录碰撞到最右边的时间
                t0 = js/frame;
            }
            all = desktop.offsetWidth - (l - (v0*t0 + 0.5*a*t0*t0)) -20
        }
        ball.style.left= all +'px'
    },20)
}

绑定鼠标松开事件，鼠标松开时触发

window.addEventListener('mouseup',function(e){
    flag = false;
    pole.classList.add('bomb');
    let left = ball.offsetLeft;
    window.setTimeout(()=>{
        pole.classList.remove('bomb');
        pole.style.display='none';
        move(e,left);
    },1000)
})

完整代码

写在最后

博主只是一个小后端开发，比较喜欢前端的东西，有时候也会做着玩，前端大神请见谅

最后推荐下我的个人博客：凡繁烦博客