您现在的位置是:网站首页>博客详情博客详情

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

凡繁烦2020-12-25 11:10前端技术1408人已围观

简介使用js和css实现桌球动画

最终效果

1.台球桌布局

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;
    height100vh;
    width100%;
    position: relative;
}
.container{
    width800px;
    margin: auto;
    height400px;
    border-radius30px;
    background-color#999;
    display: flex;
    box-shadow10px 10px 5px #e0e0e0;
}
.desktop{
    width740px;
    height340px;
    margin: auto;
    background-color: green;
    overflow: hidden;
    position: relative;
}

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

.kd{
    width60px;
    height60px;
    border-radius50%;
    background-color#000;
    position: absolute;
}
.kd:nth-child(1){
    top: -30px;
    left: -30px;
}
.kd:nth-child(2){
    width50px;
    height50px;
    top: -25px;
    left50%;
    margin-left: -25px;
}
.kd:nth-child(3){
    top: -30px;
    right: -30px;
}

.kd:nth-child(4){
    bottom: -30px;
    left: -30px;
}
.kd:nth-child(5){
    width50px;
    height50px;
    bottom: -25px;
    left50%;
    margin-left: -25px;
}
.kd:nth-child(6){
    bottom: -30px;
    right: -30px;
}

2.动画实现

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

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

3.动效实现球的滚动和反弹

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)
})

完整代码

写在最后

博主只是一个小后端开发,比较喜欢前端的东西,有时候也会做着玩,前端大神请见谅
最后推荐下我的个人博客:凡繁烦博客

很赞哦! (0)

文章评论(共0条)

{{item.createTime}} {{item.commentArea}} |({{item.commentIp}})
{{it.createTime}}{{it.commentArea}} | ({{it.commentIp}})
上一页 1 ... {{num}} ... 下一页 {{totalPage}} 跳转到: GO

站点信息

  • 建站时间:2020-03-28
  • 开发语言:JAVA
  • 文章统计:13篇
  • 文章评论:4条
  • 统计数据百度统计
  • 微博:扫描二维码,关注

打赏本站

  • 如果你觉得本站很棒,可以通过扫码支付打赏哦!
  • 微信扫码:你说多少就多少~
  • 支付宝:非常感谢您的慷慨支持~