CSS3实现带阴影的弹球

实现div上下跳动时，底部阴影随着变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3实现带阴影的弹球</title>
    <style type="text/css">
        .box{
            width: 400px;
            height: 300px;
            border: 1px #cccccc solid;
            /*距上下30，左右居中*/
            margin: 30px auto;
            /* 设置相对定位，以便子元素使用绝对定位 */
            position: relative;
        }
        .box .ball, .box .ball:after{
            border-radius: 50%;
            position: absolute;
            left: 50%;
            background: linear-gradient(top, #ffffff, #999999);
            background: -webkit-linear-gradient(top, #ffffff, #999999);
            background: -moz-linear-gradient(top, #ffffff, #999999);
            background: -ms-linear-gradient(top, #ffffff, #999999);
            background: -o-linear-gradient(top, #ffffff, #999999);
        }
        .box .ball{
            width: 140px;
            height: 140px;
            top:;
            /*因为是绝对定位，距左边百分之50，这里距左是左边距盒子左边，所以这里需要通过margin向左移动宽度一般的距离*/
            margin-left: -70px;
            -webkit-box-shadow: inset 0 0 30px #999999,inset 0 -15px 70px #999999;
            -moz-box-shadow: inset 0 0 30px #999999,inset 0 -15px 70px #999999;
            box-shadow: inset 0 0 30px #999999,inset 0 -15px 70px #999999;
            -webkit-animation: jump 5s ease-in infinite;
            -o-animation: jump 5s ease-in infinite;
            animation: jump 5s ease-in infinite;
            /*让球遮住阴影（使球显示在阴影上方）*/
            z-index:;
        }
        .box .ball:after{
            content: "";
            display: block;
            width: 70px;
            height: 30px;
            border-radius: 50%;
            top: 10px;
            margin-left: -35px;
        }
        .box .shadow{
            width: 80px;
            height: 60px;
            border-radius: 50%;
            position: absolute;
            bottom:;
            left: 50%;
            margin-left: -40px;
            background: rgba(20, 20, 20, .1);
            -webkit-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);
            -moz-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);
            box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);
            -webkit-transform: scaleY(.3);
            -moz-transform: scaleY(.3);
            -ms-transform: scaleY(.3);
            -o-transform: scaleY(.3);
            transform: scaleY(.3);
            -webkit-animation: shrink 5s ease-in infinite;
            -o-animation: shrink 5s ease-in infinite;
            animation: shrink 5s ease-in infinite;
        }
        @-webkit-keyframes jump {
            0%{ top:; }
            65%{ top: 160px; height: 140px; }
            75%{ height: 120px; }
            100%{ top:; height: 140px; }
        }
        @-o-keyframes jump {
            0%{ top:; }
            65%{ top: 160px; height: 140px; }
            75%{ height: 120px; }
            100%{ top:; height: 140px; }
        }
        @keyframes jump {
            0%{ top:; }
            65%{ top: 160px; height: 140px; }
            75%{ height: 120px; }
            100%{ top:; height: 140px; }
        }
        @-webkit-keyframes shrink {
            0%{ width: 90px; height: 60px; }
            65%{ width: 10px; height: 5px; margin-left: -5px; background: rgba(20, 20,20, .3);
                -webkit-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .3);
                -moz-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .3);
                box-shadow: 0 0 25px 20px rgba(20, 20, 20, .3); }
            100%{ width: 90px; height: 60px; background: rgba(20, 20,20, .1);
                -webkit-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);
                -moz-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);
                box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1); }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="ball"></div>
    <div class="shadow"></div>
</div>
</body>
</html>