這篇文章跟大家分享6種css3的頁面載入動畫。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
在之前的文章【CSS3學習之頁面載入動畫（一）】中已經分享了四個CSS3的載入動畫，今天繼續（標題接上一次）。
請注意：程式碼中的關鍵影格動畫有的用的linear曲線，而有的用的是ease曲線。前者是勻速執行，整個動畫以固定的速度執行；後者有加速減速階段，在動畫開始時加速，在動畫將要結束時減速（比如我在50%的地方設置了一個動畫，那麼在快要到達50 %的時候，動畫開始減速，在超過50%的時候動畫開始加速，表現在頁面上會有一個短暫的停留效果，效果七、效果八最為明顯）
五、效果五
#小球爬樓梯的效果，第一看到這個效果，以為會有點複雜，結果寫出來之後覺得也沒那麼難。
首先將樓梯定位至右上角，執行從右上至左下的運動動畫，並為每一個樓梯設定animation-delay的值（我這裡用了三個樓梯，總時長1.8s,animation- delay值分別為0s,-0.6s,-12s）
{animation: step_mv 1.8s linear infinite;}<br>@keyframes step_mv {<br> 0%{<br> right: 0;<br> top: 0;<br> opacity: 0.6;<br> }<br> 50%{<br> opacity: 1;<br> }<br> 100%{<br> right: 100%;<br> top: 100%;<br> opacity: 0.6;<br> }<br> }<br>其次，確定小球與樓梯的接觸點，小球將以此接觸點作為最低基準，同時，改變小球在上升、下降過程中的寬高來是小球跳動更真實。小球動畫的運動時間剛好是樓梯動畫的延遲時間，這樣，才能確保小球可以接觸到每個樓梯。
{animation: jump .6s 0s ease infinite,jump_S .6s 0s ease infinite;}<br>@keyframes jump {<br> 50%{<br> top: 60%;<br> }<br> }<br> @keyframes jump_S {<br> 5%{<br> height: 25px; //下降过程<br> width: 15px;<br> }<br> 54%{<br> height: 20px;//到达底部<br> width: 20px;<br> }<br> 55%{<br> height: 25px;//上升过程<br> width: 15px;<br> }<br> 98%{<br> height: 20px;//到达顶点<br> width: 20px;<br> }<br> }<br>六、效果六
這個效果就比較簡單了。
七、效果七
{animation: rotate_bors 2s ease infinite;}//大圆<br>{animation: rotate_bors 1s ease infinite;}//小圆@keyframes rotate_bors {<br> 50%{<br> transform: rotateZ(180deg);<br> }<br> 100%{<br> transform: rotateZ(360deg);<br> }<br> }<br>
這個效果也很簡單，外部大圈怎麼做就不多說了，裡面的小圓，只要改變大小就好了。
{animation: rotate_borw 1s linear infinite;}@keyframes rotate_borw {<br> 50%{<br> width: 15px;<br> height: 15px;<br> }<br> }<br>{animation: margin 1s linear infinite;}<br> @keyframes margin {<br> 50%{<br> margin:0 10px;<br> width: 10px;<br> height: 10px;<br> }<br> }<br>{animation: trans 1.2s ease infinite;}@keyframes trans {<br> 50%{<br> opacity: 1;<br> transform: translateY(30px);<br> }<br> 70%{<br> opacity: 1;<br> transform: translateY(30px);<br> }<br> 100%{<br> opacity: 0;<br> transform: translateY(60px);<br> }<br> }<br>今天就分享到這裡，後面還會有補充。希望能對大家的學習有所幫助，更多相關教學請造訪 CSS基礎影片教學， CSS3影片教學，bootstrap教學！
以上是CSS3學習之頁面載入動畫（二）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
