可以做一個(gè)animation，舉一個(gè)例子，讓一個(gè)元素在某一個(gè)范圍之內(nèi)，左距離和上距離同時(shí)改變但是，弧線要讓兩個(gè)距離改變速度變化不一致，所以最好一個(gè)元素改變上方距離可以是top也可是margintop，里面嵌入一個(gè)元素改變左邊。

1該效果使用CSS3的columnwidth實(shí)現(xiàn)，和js版的瀑布流不同圖片將縱向排列2代碼中使用了一小段JS，和瀑布流效果無關(guān)，主要用來動(dòng)態(tài)插入元素，并實(shí)現(xiàn)模擬翻頁 舉例說明 如圖。

剩余的CSS3動(dòng)畫效果也是和上述相同，看下面的代碼barfillstripes height15pxdisplayblockbackground#e74c3cwidth0borderradius8pxbackgroundimagelineargradient45deg，rgba255，255，255，2 25%。

微信小程序圓形波浪循環(huán)效果，是通過SVG可縮放矢量圖形和CSS3動(dòng)畫技術(shù)實(shí)現(xiàn)的具體來說，是通過創(chuàng)建一個(gè)SVG的圓形路徑，然后利用CSS3的動(dòng)畫來對(duì)圓形路徑進(jìn)行填充來實(shí)現(xiàn)的在CSS3動(dòng)畫中，我們可以利用關(guān)鍵幀@keyframes來。