文章来源地址https://www.toymoban.com/news/detail-505106.html
文章来源：https://www.toymoban.com/news/detail-505106.html
<!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虽然可以模拟减速和加速，但与实际相比还是有差别。
具体的参数可以通过浏览器调试。
到了这里，关于【css】小球回弹效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
