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. 伪标签的使用

能学到知识，才是重要的~