在線示例demo:http://liyunpei.xyz/loading.html

之前發(fā)了四篇,二十二個效果,今天再分享六個效果,總計二十八個效果。

二十三、效果二十三

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團訓(xùn)

 

兩個正方形,初始均定位至左上(top:0;left:0;);

一次完整運動分為四個階段:第一個階段,左上移動至右上,旋轉(zhuǎn)90°,寬高縮??;第二個階段,右上移動至右下,旋轉(zhuǎn)180°,寬高回復(fù);第三個階段,右下移動至左下,旋轉(zhuǎn)270°,寬高縮?。坏谒膫€階段,左下移動至左上,旋轉(zhuǎn)360°,寬高回復(fù)。

動畫延遲時間差為負的半個動畫時間。

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團訓(xùn)<

網(wǎng)友評論