本篇文章給大家?guī)淼膬?nèi)容是使用CSS實現(xiàn)小球拋物線運動動畫效果的代碼 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

10年積累的成都網(wǎng)站建設、成都網(wǎng)站制作經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先做網(wǎng)站設計后付款的網(wǎng)站建設流程，更有欽北免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

一個物體實現(xiàn)拋物線運動，物理上是將物體分為水平運動（勻速）和豎直運動（加速）；用css3實現(xiàn)原理也如此，用該元素需要兩層，一層控制水平，一層控制豎直；在css3中可以通過過渡或者動畫-timing-function的貝塞爾曲線設置速度，貝塞爾曲線的斜率就是物體運動的速度因此對豎直方向運動設置不同的貝塞爾公式便可以得到上拋、平拋、扭曲等各樣曲線運動。

主要實現(xiàn)如下html部分 主要兩層div一個控制水平運動， 一個控制豎直運動

    <div class="wraper">         <!--控制豎直運動-->
        <div class="item"></div> <!--控制水平運動-->
    </div>
    <div class="item2"></div>

在css中也是比較簡單 直接設置水平和豎直的運動動畫 和進行動畫的設置

    *{margin: 0;padding: 0}  /*簡單的瀏覽器兼容*/
    /*設置初始樣式*/
    .item, .item2 {
        width:20px;
        height: 20px;
        display: inline-block;
        position: absolute;
        top: 50px;
        left: 20px;
        background-color: #00aa00;
        border-radius: 50%;
    }
    /*豎直運動*/
    .wraper {
        animation: vertical-animation 2s  .5s 2;
        animation-timing-function: cubic-bezier(.11,-.33,.55,.11);
    }
    /*水平運動*/
    .wraper .item {
        animation: hor-animation 2s linear .5s 2;
    }
    @-moz-keyframes hor-animation {
        0% { transform: translateX(0px); }
        100% { transform: translateX(400px); }
    }
    @-webkit-keyframes hor-animation {
        0% { transform: translateX(0px);     }
        100% { transform: translateX(400px); }
    }
    @-moz-keyframes vertical-animation {
        0% { transform: translateY(0px);  }
        100% { transform: translateY(400px); }
    }
    @-webkit-keyframes vertical-animation {
        0% { transform: translateY(0px);     }
        100% { transform: translateY(400px); }
    }

里面主要用的的就是貝塞爾曲線 斜率就是物體的運動速度 可以根據(jù)不同斜率 繪制各樣的曲線運動

以上就是使用CSS實現(xiàn)小球拋物線運動動畫效果的代碼的詳細內(nèi)容，更多請關注創(chuàng)新互聯(lián)其它相關文章！

當前題目：使用CSS實現(xiàn)小球拋物線運動動畫效果的代碼
標題URL：http://newbst.com/article36/jhsdpg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供域名注冊、響應式網(wǎng)站、自適應網(wǎng)站、、網(wǎng)站制作、小程序開發(fā)

廣告

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