這是隻用了一個div來做的小動畫，純粹利用CSS3的animation來完成，就像是一個正方形在地上彈跳，碰到地面的時候尖角還會壓縮變圓，陰影的部分也會隨著正方形升高而縮小，至於到底該怎麼完成呢？讓我們繼續看下去。

利用偽元素

由於只使用了一個div，要同時達到正方形旋轉與陰影縮放的效果，這裡必須使用兩個偽元素（before與after）來完成，嚴格來說，雖然只有一個div，但是卻是把這個div當作外框，讓偽元素before作為旋轉的正方形，讓偽元素after作為陰影。

.box{
position:relative;

}
.box:before{
content:;
position:absolute;
z-index:2;
top:60px;
left:50px;
width:50px;
height:50px;
background:#c00;
border-radius:2px;
transform: rotate(45deg);
}
.box:after{
content:;
position:absolute;
z-index:1;
top:128px;
left:52px;
width:44px;
height:3px;
background:#eaeaea;
border-radius:100%;
}

CSS動畫

畫出正方形與陰影之後，再來就是要做動畫了，為了避免太過複雜，這裡我們先不要旋轉，先單純讓正方形上下跳動，然後陰影會放大縮小，下面的示例的動畫，又新增了20%與80%的keyframe，目的是為了讓接觸的時候角落才會變圓，不然就會變成剛開始移動時尖角就變圓，就會很怪異了。

.box:before{
content:;
position:absolute;
z-index:2;
top:60px;
left:50px;
width:50px;
height:50px;
background:#c00;
border-radius:2px;
transform: rotate(45deg);
-webkit-animation:box .8s infinite ;
}
@-webkit-keyframes box{
0%{
top:50px;
}
20%{
border-radius:2px; /*從20%的地方纔開始變形*/
}
50%{
top:80px;
border-bottom-right-radius:25px;
}
80%{
border-radius:2px; /*到80%的地方恢復原狀*/
}
100%{
top:50px;
}
}
.box:after{
content:;
position:absolute;
z-index:1;
top:128px;
left:52px;
width:44px;
height:3px;
background:#eaeaea;
border-radius:100%;
-webkit-animation:shadow .8s infinite ;
}
@-webkit-keyframes shadow{
0%,100%{
left:54px;
width:40px;
background:#eaeaea;
}
50%{
top:126px;
left:50px; /*讓陰影保持在原位*/
width:50px;
height:7px;
background:#eee;
}
}

加入旋轉效果

瞭解原理之後，我們只要再加上旋轉的屬性，就可以達到彈跳起來的時候有旋轉的效果，不過這裡又有用到一個小技巧，就是落下的時候是90度轉到45度，彈上去的時候從45旋轉到0度，然後在這一瞬間從0度變成90度（100%到0%），如此一來我們就會產生錯覺，感覺好像一直在旋轉了。

@-webkit-keyframes box{
0%{
top:50px;
transform: rotate(90deg); /**/
}
20%{
border-radius:2px;
}
50%{
top:80px;
transform: rotate(45deg);
border-bottom-right-radius:25px;
}
80%{
border-radius:2px;
}
100%{
top:50px;
transform: rotate(0deg);
}
}

舉一反三，我們也可以把角度反轉，就會往另外一邊彈跳。

如果我們把動畫裡頭添加linear，就會變成線性的連續方式喔。

推薦閱讀：

相關文章