在線(xiàn)示例demo:http://liyunpei.xyz/loading.html
之前發(fā)了四篇,二十二個(gè)效果,今天再分享六個(gè)效果,總計(jì)二十八個(gè)效果。
二十三、效果二十三
兩個(gè)正方形,初始均定位至左上(top:0;left:0;);
一次完整運(yùn)動(dòng)分為四個(gè)階段:第一個(gè)階段,左上移動(dòng)至右上,旋轉(zhuǎn)90°,寬高縮??;第二個(gè)階段,右上移動(dòng)至右下,旋轉(zhuǎn)180°,寬高回復(fù);第三個(gè)階段,右下移動(dòng)至左下,旋轉(zhuǎn)270°,寬高縮??;第四個(gè)階段,左下移動(dòng)至左上,旋轉(zhuǎn)360°,寬高回復(fù)。
動(dòng)畫(huà)延遲時(shí)間差為負(fù)的半個(gè)動(dòng)畫(huà)時(shí)間。