這篇文章再跟大家分享6種css3的頁面載入動畫。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
在之前的文章【CSS3學習之頁面載入動畫（二）】中又分享了6個CSS3的載入動畫，今天繼續分享（標題接上一次），圖片看得不真切。
十一、效果十一
四個小球分別包含於四個正方形p，將小球相對於正方形定位（top：0；left：0），將方形p設定旋轉，使小球分別位於四角，然後使用關鍵幀動畫控制小球在目前位置與靠近中心點的位置之間來回移動
{animation: flor_move 1s 0s ease infinite;}
@keyframes flor_move { 50%{
top: 25px;
left: 25px;
}
}還剩下一個旋轉的效果，這個便交給方形p的父級元素
{animation: flor_rote 2s 0s ease infinite;}@keyframes flor_rote {
25%{
transform: rotateZ(90deg);
}
50%{
transform: rotateZ(180deg);
}
75%{
transform: rotateZ(270deg);
}
100%{
transform: rotateZ(360deg);
}
}十二、效果十二
這個效果實現起來不難，將九個小球固定好位置，改變小球透明度即可（每個小球要設定不一樣動畫時間）
@keyframes mar_ligt {
50%{
opacity: 0.4;
}
}十三、效果十三
還是九個小球，不過這裡改變了小球的大小，為了防止因為改變大小而致使排版錯亂，所以每個小球都包含在固定寬高的p中，使小球在p中橫縱方向上時刻居中。這樣就可以放心地改變小球的大小了（每個小球依然設定不同的動畫時間）
@keyframes mar_ligts {
50%{
transform: scale(.5);
opacity: 0.4;
}
}#十四、效果十四
撞球效果，四個小球橫縱方向居中排列，中間兩個小球不動，左右兩邊的小球分別向兩邊來回移動（注意運動的時間差即可）。
{animation: poolball_l 1s .5s linear infinite;} //左边的小球
{animation: poolball_r 1s 0s linear infinite;} //右边的小球@keyframes poolball_l {
25%{
transform: translateX(-100%);
}
50%{
transform: translateX(0);
}
}
@keyframes poolball_r {
25%{
transform: translateX(100%);
}
50%{
transform: translateX(0);
}
}十五、效果十五
#這是一個很常見的效果，同樣的為了防止因為小球大小的改變而使頁面排版發生錯亂，在小球外面加套一層固定寬高的p。 每個小球還要設定動畫延遲
{animation: size_change 1.2s linear infinite;}@keyframes size_change {
20%{
width: 0;
height: 0;
}
40%{
width: 0;
height: 0;
}
50%{
width: 20px;
height: 20px;
}
}十六、效果十六
{animation: flip_ballP 1.2s ease infinite,flip_ballS 1.2s ease infinite;}@keyframes flip_ballP {
50%{
transform: translateY(60px);
}
}
@keyframes flip_ballS {
50%{
height: 15px;
width: 15px;
opacity: 0.6;
}
75%{
height: 20px;
width: 20px;
opacity: 1;
}
}以上是CSS3學習之頁面載入動畫（三）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
