今天就寫一個css3拋物線的動畫吧= =
#從左到右的拋物線動畫,我們就暫且把動作分為勻速向右運動和變速的上下運動。
水平勻速運動我們可以利用translateX(x):定義2D 轉換,沿著X 軸移動元素;以及linear:動畫從頭到尾的速度是相同的 這兩個屬性值來實現;
上下的勻變速運動可以利用translateY(y):定義2D 轉換,沿著Y 軸移動元素;以及ease-in-out:動畫以低速開始和結束。
1.html
<div id="container"> <div class="demobox"> <div class="demo"></div> </div> <div class="demobox"> <div class="demo"></div> </div> </div>
把demobox的p做向右的勻速的運動,裡面demo的p做上下的變速的運動。
2.css
#container { height:110px; font-size:0; width:140px; } .demobox { float:right; width:5px; height:5px; animation:myfirst1 linear 5s infinite; -webkit-animation:myfirst1 linear 5s infinite; } .demo { width:6px; height:6px; border-radius:3px; background:#90e4e9; animation:myfirst2 ease-in-out 1s infinite alternate; -webkit-animation:myfirst2 ease-in-out 1s infinite alternate; /*Safari and Chrome */ } .demobox:nth-of-type(1) .demo:nth-of-type(1){ animation-delay:0s; } .demobox:nth-of-type(2) .demo:nth-of-type(1){ animation-delay:0.03s; } @keyframes myfirst1 { from { transform:translateX(0px); -webkit-transform:translateX(0px); } to { transform:translateX(1000px); -webkit-transform:translateX(1000px); } } @-webkit-keyframes myfirst1 /* Safari and Chrome */ { from { transform:translateX(0px); -webkit-transform:translateX(0px); } to { transform:translateX(1000px); -webkit-transform:translateX(1000px); } } @keyframes myfirst2 { 0% { transform:translateY(0px); -webkit-transform:translateY(0px); } 50% { transform:translateY(100px); -webkit-transform:translateY(100px); } 100% { transform:translateY(0px); -webkit-transform:translateY(0px); } } @-webkit-keyframes myfirst2 /* Safari and Chrome */ { 0% { transform:translateY(0px); -webkit-transform:translateY(0px); } 50% { transform:translateY(100px); -webkit-transform:translateY(100px); } 100% { transform:translateY(0px); -webkit-transform:translateY(0px); } }
ok,一個正餘弦曲線出來囉 @^-^@
以上是css動畫之模擬正餘弦曲線的實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!