首頁  >  文章  >  web前端  >  css如何實現彈跳球動畫效果?現彈跳球動畫的實作範例

css如何實現彈跳球動畫效果?現彈跳球動畫的實作範例

青灯夜游
青灯夜游原創
2018-11-03 18:03:143733瀏覽

css如何實現彈跳球動畫效果?本篇文章給大家透過程式碼範例介紹css是如何實現彈跳球動畫效果的。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

1、定義動畫關鍵影格

對於這個動畫,我們將使用兩個關鍵影格- 一個用恆定速度水平平移球,另一個用於應用大致拋物線垂直彈跳運動。可以將水平和垂直平移組合成一個關鍵幀,但這對我們所追求的效果不起作用。

使用以下關鍵幀可以輕鬆實現水平運動:

 @-webkit-keyframes travel {
    from {              }
    to   { left: 640px; }
  }
  @keyframes travel {
    from {              }
    to   { left: 640px; }
  }

稍後將使用指定的名稱“travel”引用此關鍵幀,並使用linear(轉換計時函數)來應用該關鍵幀,函數隨每次迭代更改方向。

對於垂直彈跳,動畫,我們要利用的易用性在和漸出定時功能來模擬重力場的影響:

 @-webkit-keyframes bounce {
    from, to  {
      bottom: 0;
      -webkit-animation-timing-function: ease-out;
    }
    50% {
      bottom: 220px;
      -webkit-animation-timing-function: ease-in;
    }
  }
  @keyframes bounce {
    from, to  {
      botttom: 0;
      animation-timing-function: ease-out;
    }
    50% {
      bottom: 220px;
      animation-timing-function: ease-in;
    }
  }

該關鍵幀已被命名為“bounce”以供日後參考。

組合這兩個關鍵影格將使我們的'球'水平移動640像素,垂直移動220像素。當然,這些值需要調整以適應“舞台”的大小。

2、設定動畫的舞台

與往常一樣,我們首先設定一個“舞台”,在其中執行動畫。在這種情況下,一個尺寸為660 x 240像素的簡單DIV。讓寬度為100%會很好,但是在不知道確切像素寬度的情況下放置一些元素是很困難的。

#stage {
    position: relative;
    margin: 1em auto;
    width: 660px;
    height: 240px;
    border: 2px solid #666;
    background: #cff;
  }

在這個階段,我們將設定一個水平來回移動的DIV元素,並在其中表示上下反彈的「球」的DIV:

#traveler {
    position: absolute;
    width: 20px;
    height: 240px;
    -webkit-animation-name: travel;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 4.8s;
    animation-name: travel;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 4.8s;
  }
  #bouncer {
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 10px;
    -webkit-animation-name: bounce;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 4.2s;
    animation-name: bounce;
    animation-iteration-count: infinite;
    animation-duration: 4.2s;
  }

所以'球'的尺寸為20 x 20像素,圓角。

3、設定球運動

我們完成了一些簡單的HTML標記:

<div id="stage">
   <div id="traveler">
       <div id="bouncer"><!-- --></div>
   </div>
</div>

如果您的瀏覽器支援它,動畫將自動啟動並在下面的框(或#stage)中無限期地繼續:

css如何實現彈跳球動畫效果?現彈跳球動畫的實作範例

css如何實現彈跳球動畫效果?現彈跳球動畫的實作範例

css如何實現彈跳球動畫效果?現彈跳球動畫的實作範例

我們加入了一個額外的元素和一些樣式來突出動畫的x和y分量,不需要JavaScript,其他程式碼完全如所示。

CSS:bounce-animation.css(https://www.the-art-of-web.com/bounce-animation.css)

#大功告成!

總結:以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。

以上是css如何實現彈跳球動畫效果?現彈跳球動畫的實作範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn