僅使用CSS和HTML使每次連續反彈的高度降低的球反彈

我正在嘗試僅使用 HTML 和 CSS 來使球彈跳，希望不需要 Javascript。我可以做一個簡單的彈跳（請參閱 參考資料#ball），并帶有一些水平運動。貝塞爾曲線計時功能有助于使其自然。但是，我無法使高度連續反彈減少 - 請參閱#ball2。我嘗試了以下方法（#ball 和#ball2 都如下所示），但彈跳#ball2看起來并不自然。（我還嘗試為“持有”球的 div 的高度設定影片，但由于某種原因它不起作用。）此外，還有另一個問題：當我在關鍵幀中設定 100% 的球反彈高度時，它測量球的高度，而不是父 div 的高度，并取其 100%（即 100px 的 100%）。
#ball2是我在關鍵幀中錯誤地放置了貝塞爾曲線。我cubic-bezier(0.5, 1, 0.05, 0.5)認為反彈的向上部分，但不認為這是正確的。我認為cubic-bezier(0.5, 0.05, 1, 0.5)對于向下反彈（參見#ball參考資料）效果很好，并且“alternate”的影片方向確保三次貝塞爾曲線在#ball. （但#ball反彈的高度沒有變化。）我已經嘗試過“緩出”計時功能，用于反彈的情況，#ball2但它仍然看起來不正確。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  display: flex;
 flex-direction: column;
  align-items: center;
}

#div1{
 width: 100vw;
 height: 100vh;
 background: gray;
  display: flex;
 flex-direction: column reverse;
align-items: flex-end;
  position: relative;
   animation: slide 3s linear forwards; 
}

#div2{
 width: 100%;
 height: 100%;
 background: gray;
  display: flex;
 flex-direction: column reverse;
 align-items: flex-end;
  position: absolute;
}

@keyframes slide{
  0%{ transform: translate3d(0, 0, 0);}
    10%{ transform: translate3d(-30px, 0, 0);}
    20%{ transform: translate3d(-60px, 0, 0);}
    30%{ transform: translate3d(-90px, 0, 0);}
    40%{ transform: translate3d(-120px, 0, 0);}
    50%{ transform: translate3d(-150px, 0, 0);}
    60%{ transform: translate3d(-180px, 0, 0);}
    70%{ transform: translate3d(-210px, 0, 0);}
    80%{ transform: translate3d(-240px, 0, 0);}
    90%{ transform: translate3d(-270px, 0, 0);}
    100%{ transform: translate3d(-300px, 0, 0);}
}

#ball{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    right: 100px;
    top:200px;
    position: absolute;
    background-color:  pink;
    animation: bounce .5s alternate cubic-bezier(0.5, 0.05, 1, 0.50) 16;
    transform-box: border-box;
    }

@keyframes bounce {
  0%{transform:  translate(0,-200%);}
  100%{transform:  translate(0, 0);}
}

#ball2{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    right: 100px;
    top:200px;
    position: absolute;
    background-color:  pink;
    animation: bounce2 2s,bezier 2s steps(6) ;
}

@keyframes bezier {
 0% {animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.50);}
 20% {animation-timing-function: cubic-bezier(0.5, 1, 0.05, 0.50);}
40% {animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.50);}
60% {animation-timing-function: cubic-bezier(0.5, 1, 0.05, 0.50);}
80% {animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.50);}
100% {animation-timing-function: cubic-bezier(0.5, 1, 0.05, 0.50);}
}

@keyframes bounce2 {
  0%{transform:  translate(0,-300%);} 
  20%{transform:  translate(0, 0);}
  40%{transform:  translate(0,-150%);}
  60%{transform:  translate(0, 0);}
  80% {transform:  translate(0,-75%);}
  100%{transform:  translate(0, 0);} 
}






   

<div id="div1">
   <div id="div2">
      <div id="ball2"></div>
   </div>
</div>

uj5u.com熱心網友回復：

我嘗試使用高度和寬度值。我認為它可以幫助你。

@keyframes bounce2 {
  0% {
    transform: translate(0, -300%);
    height: 120px;
  }
  12% {
    height: 120px;
  }
  20% {
    transform: translate(0, 0);
    height: 90px;
    width: 110px;
  }
  40% {
    transform: translate(0, -150%);
    height: 110px;
    width: 100px;
  }
  50% {
    height: 110px;
    width: 100px;
  }
  60% {
    transform: translate(0, 0);
    height: 95px;
    width: 105px;
  }
  80% {
    transform: translate(0, -75%);
    height: 95px;
  }
  100% {
    transform: translate(0, 0);
  }
}

uj5u.com熱心網友回復：

看起來沒有系統的方法可以通過 CSS 和 HTML 以及像我嘗試的那樣使用貝塞爾曲線來實作這一點。查看示例Bouncing ball with CSS keyframes和Creating an Animated 3D Bouncing Ball with CSS3 of bouncing balls ，如果想要堅持使用 HTML 和 CSS，似乎唯一的方法是使用不同的高度和時間值，直到獲得了正確的彈跳效果。他們在這些網站上取得了很好的成績。

標籤：html css 弹性盒

上一篇：jquery檢查一個div看它是否有任何文本

下一篇：重繪網站時有沒有辦法改變網站的顏色？