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

效果图

制作步骤

先准备个球和一个地面

<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;