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

最新推荐文章于 2022-07-07 14:04:16 发布

blankliu404

最新推荐文章于 2022-07-07 14:04:16 发布

阅读量1.1k

点赞数 1

文章标签： CSS 小球落地效果

本文链接：https://blog.csdn.net/L333333333/article/details/101617376

版权

本文通过CSS制作了一个小球落地并反弹的仿真效果，包括准备球和地面、为小球添加动效以及实现曲线运动。建议使用约瑟夫曲线函数提升自由落体的逼真度。提供完整代码供读者参考。

摘要由CSDN通过智能技术生成

模仿一个球落地效果，最终停在地面上（仿真效果，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;