css怎么實現(xiàn)彈跳球動畫效果

小編給大家分享一下css怎么實現(xiàn)彈跳球動畫效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

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

　　使用以下關(guān)鍵幀可以輕松實現(xiàn)水平運動：

　　@-webkit-keyframestravel{

　　from{}

　　to{left:640px;}

　　}

　　@keyframestravel{

　　from{}

　　to{left:640px;}

　　}

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

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

　　@-webkit-keyframesbounce{

　　from,to{

　　bottom:0;

　　-webkit-animation-timing-function:ease-out;

　　}

　　50%{

　　bottom:220px;

　　-webkit-animation-timing-function:ease-in;

　　}

　　}

　　@keyframesbounce{

　　from,to{

　　botttom:0;

　　animation-timing-function:ease-out;

　　}

　　50%{

　　bottom:220px;

　　animation-timing-function:ease-in;

　　}

　　}

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

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

　　2、設(shè)置動畫的舞臺

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

　　#stage{

　　position:relative;

　　margin:1emauto;

　　width:660px;

　　height:240px;

　　border:2pxsolid#666;

　　background:#cff;

　　}

　　在這個階段，我們將設(shè)置一個水平來回移動的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;

　　}

　　所以'球'的尺寸為20x20像素，圓角。

　　3、設(shè)置球運動

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

　　<divid="stage">

　　<divid="traveler">

　　<divid="bouncer"><!----></div>

　　</div>

　　</div>

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

以上是“css怎么實現(xiàn)彈跳球動畫效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！