你還不如出手敲一遍的視頻

直接敲你的代碼連定位都是錯(cuò)的

相對(duì)定位里寫top，還有90%里把transleteY不寫會(huì)覆蓋掉。你這利用反向的缺點(diǎn)就是還沒碰到地面時(shí)球就開始變形了。我有點(diǎn)懷疑你沒手敲過，而是從某處copy出來的

```html

<div class="container">

? ? ? <div id="bounce">

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

? ? ? ? <div class="ground"></div>

? ? ? </div>

</div>

```

```less

*{margin:0;}

body{background-color: #000;}

.container{

? display: flow-root;

? #bounce {

? ? width: 300px;

? ? height: 300px;

? ? position: relative;

? ? margin:200px auto;

? ? .ball {

? ? ? width: 80px;

? ? ? height: 80px;

? ? ? border-radius: 50%;

? ? ? background-color: #fff;

? ? ? position: absolute;

? ? ? top: 0;

? ? ? left: 160px;

? ? ? animation: 1.5s falling ?infinite;

? ? ? @keyframes falling {

? ? ? ? 0%,100%{

? ? ? ? ? transform: translateY(0px) scale(1,1);

? ? ? ? }

? ? ? ? 50%{

? ? ? ? ? transform: translateY(216px) scale(1,1);

? ? ? ? }

? ? ? ? 51%{

? ? ? ? ? transform: translateY(214px) scale(0.8,1);

? ? ? ? }

? ? ? ? 52%{

? ? ? ? ? transform: translateY(202px) scale(1,0.8);

? ? ? ? }

? ? ? }

? ? }

? ? .ground {

? ? ? width: 400px;

? ? ? height: 20px;

? ? ? background-color: #fff;

? ? ? position: absolute;

? ? ? bottom: 0;

? ? }

? }

?

}

```