【css】小球回弹效果

最新推荐文章于 2023-12-04 09:20:44 发布

ོ栖落

最新推荐文章于 2023-12-04 09:20:44 发布

阅读量1k

点赞数 1

分类专栏： # css 文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_63806300/article/details/131399503

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 450px;
            height: 450px;
            background-color: silver;
            margin-left: 0;
        }
        .ball {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
            animation: bounce 3s cubic-bezier(.1,.25,1,.25);
        }
        @keyframes bounce {
            60%,80%,to{
                transform: translateY(350px);
                animation-timing-function: ease-out;
            }
            70%{
                transform: translateY(250px);
            }
            90%{
                transform: translateY(300px);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="ball"></div>
    </div>
</body>
</html>

代码中，运用了贝塞尔曲线，如果不运用的话的效果将是这样：

虽然看起来没有问题，实际上问题在于小球的速度是一样的，而实际上小球具有加速度，小球随着时间的变化速度也会不同，通过设置ease-in和ease-out虽然可以模拟减速和加速，但与实际相比还是有差别。

具体的参数可以通过浏览器调试。

ོ栖落

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【css】小球回弹效果

虽然看起来没有问题，实际上问题在于小球的速度是一样的，而实际上小球具有加速度，小球随着时间的变化速度也会不同，通过设置ease-in和ease-out虽然可以模拟减速和加速，但与实际相比还是有差别。具体的参数可以通过浏览器调试。
复制链接

扫一扫