這篇文章將為大家詳細(xì)講解有關(guān)css實(shí)現(xiàn)彈跳球動(dòng)畫效果的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站主要從事網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)安寧,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220

1、定義動(dòng)畫關(guān)鍵幀

對(duì)于這個(gè)動(dòng)畫，我們將使用兩個(gè)關(guān)鍵幀 - 一個(gè)用恒定速度水平平移球，另一個(gè)用于應(yīng)用大致拋物線垂直彈跳運(yùn)動(dòng)。可以將水平和垂直平移組合成一個(gè)關(guān)鍵幀，但這對(duì)我們所追求的效果不起作用。

使用以下關(guān)鍵幀可以輕松實(shí)現(xiàn)水平運(yùn)動(dòng)：

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

稍后將使用指定的名稱“travel”引用此關(guān)鍵幀，并使用linear（轉(zhuǎn)換計(jì)時(shí)函數(shù)）來(lái)應(yīng)用該關(guān)鍵幀，該函數(shù)隨每次迭代更改方向。

對(duì)于垂直彈跳，動(dòng)畫，我們要利用的易用性在和漸出定時(shí)功能來(lái)模擬重力場(chǎng)的影響：

 @-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;
    }
  }

該關(guān)鍵幀已被命名為“bounce”以供將來(lái)參考。

組合這兩個(gè)關(guān)鍵幀將使我們的'球'水平移動(dòng)640像素，垂直移動(dòng)220像素。當(dāng)然，這些值需要調(diào)整以適應(yīng)“舞臺(tái)”的大小。

2、設(shè)置動(dòng)畫的舞臺(tái)

與往常一樣，我們首先設(shè)置一個(gè)“舞臺(tái)”，在其中執(zhí)行動(dòng)畫。在這種情況下，一個(gè)尺寸為660 x 240像素的簡(jiǎn)單DIV。讓寬度為100％會(huì)很好，但是在不知道確切像素寬度的情況下放置一些元素是很困難的。

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

在這個(gè)階段，我們將設(shè)置一個(gè)水平來(lái)回移動(dòng)的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、設(shè)置球運(yùn)動(dòng)

我們完成了一些簡(jiǎn)單的HTML標(biāo)記：

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

如果您的瀏覽器支持它，動(dòng)畫將自動(dòng)啟動(dòng)并在下面的框（或#stage）中無(wú)限期地繼續(xù)：

我們添加了一個(gè)額外的元素和一些樣式來(lái)突出動(dòng)畫的x和y分量，不需要JavaScript，其他代碼完全如所示。

關(guān)于css實(shí)現(xiàn)彈跳球動(dòng)畫效果的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁(yè)名稱：css實(shí)現(xiàn)彈跳球動(dòng)畫效果的方法
標(biāo)題鏈接：http://m.rwnh.cn/article44/iggshe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、App設(shè)計(jì)、服務(wù)器托管、企業(yè)建站、微信公眾號(hào)、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)