效果图

制作步骤

先准备个球和一个地面

<style type="text/css">*{padding: 0;margin: 0;}body{width: 100vw;height: 100vh;background: #b2bec3;display: flex;justify-content: center;}div.ball{width: 50px;height: 50px;border-radius: 50%;background: radial-gradient(at center,#74b9ff,#0984e3);}div.floor{position: absolute;bottom: 0;left: 0;width: 100vw;height: 10vh;background: #000;opacity: .5;}
</style>

<div class="ball"></div>
<div class="floor"></div>

此步效果如下

给球准备动效

<style type="text/css">*{padding: 0;margin: 0;}body{width: 100vw;height: 100vh;background: #b2bec3;display: flex;justify-content: center;}div.ball{width: 50px;height: 50px;border-radius: 50%;background: radial-gradient(at center,#74b9ff,#0984e3);animation:fall 5s;}div.floor{position: absolute;bottom: 0;left: 0;z-index: -1;width: 100vw;height: 10vh;background: #000;opacity: .5;}@keyframes fall{15%,35%,55%,80%,100%{transform: translateY(90vh);}25%{transform: translateY(30vh);}45%{transform: translateY(55vh);}65%{transform: translateY(70vh);}90%{transform: translateY(85vh);}}
</style>

<div class="ball"></div>
<div class="floor"></div>

半成品效果

再给些曲线运动的效果

下落的时候越来越快，上弹的时候越来越慢

<style type="text/css">*{padding: 0;margin: 0;}body{width: 100vw;height: 100vh;background: #b2bec3;display: flex;justify-content: center;}div.ball{width: 50px;height: 50px;border-radius: 50%;background: radial-gradient(at center,#74b9ff,#0984e3);animation:fall 5s;}div.floor{position: absolute;bottom: 0;left: 0;z-index: -1;width: 100vw;height: 10vh;background: #000;opacity: .5;}@keyframes fall{15%,35%,55%,80%,100%{transform: translateY(90vh);transition-timing-function: ease-in;}25%{transform: translateY(30vh);transition-timing-function: ease-out;}45%{transform: translateY(55vh);transition-timing-function: ease-out;}65%{transform: translateY(70vh);transition-timing-function: ease-out;}90%{transform: translateY(85vh);transition-timing-function: ease-out;}}
</style>

<div class="ball"></div>
<div class="floor"></div>

成品效果

emmm好吧，制作的gif图非常粗糙，请大家运行完整代码查看效果：）
建议物理好又耐心的朋友使用约瑟尔曲线函数描绘一下自由落体的曲线效果，这样会更加逼真！

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小球落地效果（模拟仿真）</title><style type="text/css">*{padding: 0;margin: 0;}body{width: 100vw;height: 100vh;background: #b2bec3;display: flex;justify-content: center;}div.ball{width: 50px;height: 50px;border-radius: 50%;background: radial-gradient(at center,#74b9ff,#0984e3);animation:fall 5s;}div.floor{position: absolute;bottom: 0;left: 0;z-index: -1;width: 100vw;height: 10vh;background: #000;opacity: .5;}@keyframes fall{15%,35%,55%,80%,100%{transform: translateY(90vh);transition-timing-function: ease-in;}25%{transform: translateY(30vh);transition-timing-function: ease-out;}45%{transform: translateY(55vh);transition-timing-function: ease-out;}65%{transform: translateY(70vh);transition-timing-function: ease-out;}90%{transform: translateY(85vh);transition-timing-function: ease-out;}}</style>
</head>
<body><div class="ball"></div><div class="floor"></div>
</body>
</html>

本博客其他文章推荐

让一个小球无限的弹弹弹~(CSS实现球无限弹动)

如果有一屏幕的爱心，你愿意送给谁？（简单实现原生js、css随机生成521个心）

maven新手上路–创建webapp项目，引入jstl、el依赖及el不解析的问题解决（详细图文）

springmvc5.1.9在控制器中一个方法可跳视图也可跳方法问题解决

手撸一个自己的简易struts2框架吧！

模仿一个球落地效果，最终停在地面上（仿真效果，CSS实现）相关推荐

【C++训练】一个球从100m高度自由落下,每次落地后反跳回原来高度的一半,再落下,再反弹.求它在第N次落地时共经过多少米?
如题: 一个球从100m高度自由落下,每次落地后反跳回原来高度的一半,再落下,再反弹.求它在第N次落地时共经过多少米? 输入 :反弹的次数N 输出:小球经过的路程(保留四位小数) 样例输入:2 样例输 ...
一个球从100米高度自由落下，每次落地后反弹回原高度的一半； * 再落下，求在第几次之后反弹高度小于0.1米， * 并计算在这一次落地时共经过多少米？...
package com.db2;/*** 一个球从100米高度自由落下,每次落地后反弹回原高度的一半: * 再落下,求在第几次之后反弹高度小于0.1米,* 并计算在这一次落地时共经过多少米?* * @ ...
【前端】用javaScript实现实现一个球池的效果
ballPool 用javaScript实现实现一个球池的效果,实现效果如下所示: 动图: 截图: HTML代码: <!DOCTYPE html> <html > <he ...
一个球从100m高度自由落下，每次落地后反弹回原高度的一半，再落下，再反弹。求它在第10次落地时共经过多少米，第十次反弹多高
一个球从100m高度自由落下,每次落地后反弹回原高度的一半,再落下,再反弹.求它在第10次落地时共经过多少米,第十次反弹多高 #include <stdio.h> #include < ...
C语言一个球从100米高度下落，每次下落反弹原来高度的一半，如此反复，求第10次落地时共经历了多少米？第10次反弹多高？
C语言一个球从100米高度下落,每次下落反弹原来高度的一半,如此反复,求第10次落地时共经历了多少米?第10次反弹多高? 代码: #include <stdio.h> void main ...
C语言--＞一个球从100m高度自由落下，每次落地后反跳回原高度的一半，再落下，再反弹。求它在第10次落地时，共经过多少米？第10次反弹多高？
//题目:一个球从100m高度自由落下,每次落地后反跳回原高度的一半,再落下,再反弹.求它在第10次落地时,共经过多少米?第10次反弹多高? //首先考虑,第一次落地高度为a=100m,从第二次开始, ...
【c语言】一个球从100米高的自由落下，每次落地后反跳回原高度的一半，再落下，再反弹。求第 10次落地时，共经过多少米，第10次反弹多高。
//一个球从100米高的自由落下,每次落地后反跳回原高度的一半,再落下,再反弹.求第 //10次落地时,共经过多少米,第10次反弹多高. #include <stdio.h> double ...
计算球的反弹高度一个球从100米高度自由落下，每次落地后反跳回原高度的一半，再落下并反弹......，求它在第5次和第10次落地时，分别共经过了多少米？第5次和第10次反弹分别是多高？
计算球的反弹高度一个球从100米高度自由落下,每次落地后反跳回原高度的一半,再落下并反弹-,求它在第5次和第10次落地时,分别共经过了多少米?第5次和第10次反弹分别是多高?要求计算结果保留到小数点 ...
一个球从100米的高度自由落下，每次落地后反弹回原来高度的一半，然后再落下的问题
题目: 一个球从100米的高度自由落下,每次落地后反弹回原来高度的一半,然后再落下,求它在第10次落地时,共经过多少米?第10次反弹的高度是多少? package org.geekbang.作业.第 ...

模仿一个球落地效果，最终停在地面上（仿真效果，CSS实现）