CSS3 Implementing a shaded pinball

When the div jumps up and down, the bottom shadow changes with

<! DOCTYPE html>{width:400px;Height:300px;Border:1px #cccccc Solid;/*from top to bottom 30, centered around*/margin:30px Auto;/*set relative positioning so that child elements use absolute positioning*/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:0;/*because it is absolute positioning, from the left 50, where the left is left to the left side of the box, so it is necessary to move the width to the left by margin of the general distance*/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;/*let the ball cover the shadow (make the ball appear above the shadow)*/Z-index:1; }. 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:0; Left:50%;Margin-left:-40px;background:Rgba (1);-webkit-box-shadow:0 0 25px 20px rgba (+, 1);-moz-box-shadow:0 0 25px 20px rgba (+, 1);Box-shadow:0 0 25px 20px rgba (+, 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:0; }65%{Top:160px;Height:140px; }75%{Height:120px; }100%{Top:0;Height:140px; }} @-o-keyframes jump{0%{Top:0; }65%{Top:160px;Height:140px; }75%{Height:120px; }100%{Top:0;Height:140px; }} @keyframes jump{0%{Top:0; }65%{Top:160px;Height:140px; }75%{Height:120px; }100%{Top:0;Height:140px; }} @-webkit-keyframes Shrink{0%{Width:90px;Height:60px; }65%{width:10px;Height:5px;Margin-left:-5px;background:Rgba (20,20,. 3);-webkit-box-shadow:0 0 25px 20px rgba (+, 3);-moz-box-shadow:0 0 25px 20px rgba (+, 3);Box-shadow:0 0 25px 20px rgba (+, 3); }100%{width:90px;Height:60px;background:Rgba (20,20,. 1);-webkit-box-shadow:0 0 25px 20px rgba (+, 1);-moz-box-shadow:0 0 25px 20px rgba (+, 1);Box-shadow:0 0 25px 20px rgba (+, 1); }} </style>

CSS3 Implementing a shaded pinball