在線demo：http://liyunpei.xyz/loading.html （持續(xù)更新）

請(qǐng)注意：代碼中的關(guān)鍵幀動(dòng)畫(huà)有的用的linear曲線，而有的用的是ease曲線。前者是勻速執(zhí)行，整個(gè)動(dòng)畫(huà)以固定的速度執(zhí)行；后者有加速減速階段，在動(dòng)畫(huà)開(kāi)始時(shí)加速，在動(dòng)畫(huà)將要結(jié)束時(shí)減速（比如我在50%的地方設(shè)置了一個(gè)動(dòng)畫(huà)，那么在快要到達(dá)50%的時(shí)候，動(dòng)畫(huà)開(kāi)始減速，在超過(guò)50%的時(shí)候動(dòng)畫(huà)開(kāi)始加速，表現(xiàn)在頁(yè)面上會(huì)有一個(gè)短暫的停留效果，效果七、效果八最為明顯）

五、效果五

小球爬樓梯的效果，第一看到這個(gè)效果，本以為會(huì)有點(diǎn)兒復(fù)雜，結(jié)果寫(xiě)出來(lái)之后覺(jué)得也沒(méi)有那么難。

首先將樓梯定位至右上角，執(zhí)行從右上至左下的運(yùn)動(dòng)動(dòng)畫(huà)，并為每一個(gè)樓梯設(shè)置animation-delay的值（我這里用了三個(gè)樓梯，總時(shí)長(zhǎng)1.8s,animation-delay值分別為0s,-0.6s,-12s）

{:;:;:; }{:; }{:;:;:; }

其次，確定小球與樓梯的接觸點(diǎn)，小球?qū)⒁源私佑|點(diǎn)作為最低基準(zhǔn)，同時(shí)，改變小球在上升、下降過(guò)程中的寬高來(lái)是小球跳動(dòng)更真實(shí)。小球動(dòng)畫(huà)的運(yùn)動(dòng)時(shí)間剛好是樓梯動(dòng)畫(huà)的延遲時(shí)間，這樣，才能保證小球可以接觸到每一個(gè)樓梯。

{animation: jump .6s 0s ease infinite,jump_S .6s 0s ease infinite;}@keyframes jump { 50%{ top: 60%; @keyframes jump_S { 5%{ height: 25px; //下降過(guò)程width: 15px; } 54%{height: 20px;//到達(dá)底部width: 20px; } 55%{height: 25px;//上升過(guò)程width: 15px; } 98%{height: 20px;//到達(dá)頂點(diǎn)width: 20px; }}

六、效果六

這個(gè)效果就比較簡(jiǎn)單了。

一個(gè)矩形div，設(shè)置邊框、圓角，將其中任意一個(gè)邊框顏色設(shè)置為繼承（即border-left/bottom/top/right-color:transparent）；

這樣，父元素沒(méi)有邊框顏色，這一邊的邊框也就無(wú)色，便形成了有缺口的圓，接下來(lái)只要設(shè)置旋轉(zhuǎn)動(dòng)畫(huà)就OK了。（代碼就不貼出來(lái)了）

七、效果七

這個(gè)效果形狀的制作與上一個(gè)做法相同，只是這次多加了一個(gè)邊框，還是旋轉(zhuǎn)，就不多說(shuō)了，直接上關(guān)鍵幀動(dòng)畫(huà)的代碼。

{animation: rotate_bors 2s ease infinite;}//大圓{animation: rotate_bors 1s ease infinite;}//小圓@keyframes rotate_bors { 50%{ transform: rotateZ(180deg); } 100%{transform: rotateZ(360deg); }}

八、效果八

這個(gè)效果也很簡(jiǎn)單，外部大圈怎么做就不多說(shuō)了，里面的小圓，也只要改變大小就行了。

{animation: rotate_borw 1s linear infinite;}@keyframes rotate_borw { 50%{ width: 15px;height: 15px; }}

九、效果九

將小球全部設(shè)置為行內(nèi)塊元素，給父元素text-align：center來(lái)使小球水平居中，通過(guò)設(shè)置行高，來(lái)使小球垂直居中。接下來(lái)通過(guò)關(guān)鍵幀動(dòng)畫(huà)來(lái)改變小球的長(zhǎng)寬、以及左右外邊距。

{animation: margin 1s linear infinite;}@keyframes margin { 50%{ margin:0 10px;width: 10px;height: 10px; }}

十、效果十

依然將小球設(shè)為行內(nèi)塊，只需水平居中即可，可以設(shè)置外邊距來(lái)調(diào)整小球之間的距離，通過(guò)關(guān)鍵幀來(lái)設(shè)置小球的translateY的值。（每個(gè)小球之間的延遲不必均分，差值可以減小）

{animation: trans 1.2s ease infinite;}@keyframes trans { 50%{ opacity: 1;transform: translateY(30px); } 70%{opacity: 1;transform: translateY(30px); } 100%{opacity: 0;transform: translateY(60px); }}

（未完待續(xù)）

以上就是CSS3-讀取效果的動(dòng)畫(huà)實(shí)現(xiàn)的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。