CSS效果篇 CSS3實現5種預載動畫效果

2021-09-17 02:24:24 字數 2110 閱讀 8580

實現如圖所示的動畫效果：

在兩個不同方向旋轉的圓圈。我們對內圈的轉速定義了乙個css**，即內圈比外圈的速率快2倍。

實現如圖所示：

}兩個圓圈進行橫向交錯來回移動。每個圓圈都設定了單獨的反向移動動畫引數。

效果：

html**：
css**：

#preloader-2


#preloader-2 span


#preloader-2 span:nth-child(1)


#preloader-2 span:nth-child(2)


@keyframes cross-1


50%100%


}@keyframes cross-2


50%100%


}
效果：

}這是一種墨西哥波浪紋的動畫效果，通過設定不同圓圈之間的延遲引數來實現。

效果：

html**：
css**：

#preloader-4


#preloader-4 span


#preloader-4 span:nth-child(1)


#preloader-4 span:nth-child(2)


#preloader-4 span:nth-child(3)


#preloader-4 span:nth-child(4)


#preloader-4 span:nth-child(5)


@keyframes bounce


50%100%


}
一種雷達輻射效果，給3個span elements設定相同的淡入淡出效果，再予每個稍微延遲下即可實現。

效果：

html**：
css**：

#preloader-5


#preloader-5 span


#preloader-5 span:nth-child(1)


#preloader-5 span:nth-child(2)


#preloader-5 span:nth-child(3)


@keyframes radar


25%50%


75%100%


}

CSS3效果 5種預載動畫效果

實現如圖所示的動畫效果 在兩個不同方向旋轉的圓圈。我們對內圈的轉速定義了乙個css 即內圈比外圈的速率快2倍。實現如圖所示 兩個圓圈進行橫向交錯來回移動。每個圓圈都設定了單獨的反向移動動畫引數。效果 html body style background 4ad3b4 div id preloader...

CSS3效果 5種預載動畫效果

實現如圖所示的動畫效果 在兩個不同方向旋轉的圓圈。我們對內圈的轉速定義了乙個css 即內圈比外圈的速率快2倍。實現如圖所示 兩個圓圈進行橫向交錯來回移動。每個圓圈都設定了單獨的反向移動動畫引數。效果 html body style background 4ad3b4 div id preloader...

CSS3實現10種Loading效果

原文 昨晚用css3實現了幾種常見的loading效果，雖然很簡單，但還是分享一下，順便也當是做做筆記 第1種效果 如下 loading loading span webkit keyframes load 50 loading span nth child 2 loading span nth c...