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

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