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