用html制作带阴影小球弹跳,CSS3实现带阴影的弹球

CSS3实现带阴影的弹球

.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:0;

/*因为是绝对定位，距左边百分之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: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(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: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,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); }}