CSS3乾貨9：做一個彈跳動畫

先看效果

步驟1：準備一個 div 標籤

<div class="ball">
</div>

分析一下：

這個效果上有兩個內容：球 ， 影子。

球是這個div的 ::before 僞標籤，影子 是這個球的 ::after 僞標籤。

步驟2：製作小球和影子

 *{
            margin: 0;
            padding: 0;
 }
.ball{
            width: 200px;
            height: 200px;
            background: #eee;
            margin-left: auto;
            margin-right: auto;
            position: relative;   /* 絕對定位，讓小球和影子可以任意在範圍內定位 */
}
.ball:before{
            content: ""; 
            width: 100px;
            height: 100px;
            position: absolute;
            border-radius: 100%;
            bottom: 0;

            left:50%;    /* 讓小球居中 */
            margin-left: -50px;

            background: #cb2b36;
            z-index: 2;   /* 讓小球能蓋住影子 */
 }
.ball:after{
            content: "";
            width: 70px;   /* 影子要扁點 */
            height: 5px;
            background: #000;
            position: absolute;
            border-radius: 100%;

            bottom: 0;
            left:50%;   /* 讓影子居中 */
            margin-left: -35px;
            filter:blur(3px);   /* 影子模糊 */
            z-index: 1; 
}

步驟3：讓小球和影子動起來

小球上下移動，影子放大縮小且做透明度變化。

兩個物體的動畫都是反覆執行，且次數不限。

/* 接前面的代碼 */

/* 分別定義動畫  */
@keyframes ballUpAndDown {
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-40px);
    }
}

@keyframes shadowAni {
    0%{
        transform: scale(1,1);
        opacity: 1;
    }
    100%{
        transform: scale(1.2,1.2);
        opacity: 0.5;
    }
}

.ball:before{
   animation: ballUpAndDown 0.5s infinite alternate;
}
.ball:after{
   animation: shadowAni 0.5s infinite alternate;
}

完工。

這個動畫可以用在什麼地方呢？暫時想不到，不過可以從這個案例中瞭解：

1. CSS3動畫

2. 僞標籤的使用

能學到知識，纔是重要的~