CSS 實現小球拋物線運動的動畫效果 （代碼）

這篇文章帶給大家的內容是關於CSS實現小球拋物線運動的動畫效果（代碼） ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

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

主要實現如下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); }
    }

裡面主要用的就是貝塞爾曲線斜率就是物體的運動速度可以根據不同斜率繪製各樣的曲線運動

相關推薦：

html5模擬平拋運動(模擬小球平拋運動過程)_html5教學技巧

#如何使用純CSS實作一個沙漏的動畫效果

以上是CSS 實現小球拋物線運動的動畫效果 （代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！