css3实现弹球效果

<style>
*{margin:0px;padding:0px;list-style: none;}
.box{width:400px;height:300px;border:1px solid #ccc;margin:30px auto;position:relative;}
.ball{width:140px;height:140px;
    border-radius: 50%;
    position:absolute;top:0;
    left:50%;margin-left:-70px;
    background:-webkit-linear-gradient(top,#fff,#999);
    box-shadow: inset 0 0 30px #999,inset 0 -15px 70px #999;
    -webkit-animation:jump 1s ease-in-out infinite;
    z-index:1;}
.ball:after{
    content: '';display: block;
    width:70px;height:30px;
    border-radius: 50%;position:absolute;top:10px;
    left:50%;margin-left:-35px;
    background:-webkit-linear-gradient(#fff,#ccc);}
.shadow{
    width:80px;height:60px;
    border-radius: 50%;position:absolute;
    bottom:0px;left:50%;
    margin-left: -40px;
    background: rgba(20,20,20,0.1);
    box-shadow: 0 0 25px 20px rgba(20,20,20,0.1);
    transform: scaleY(0.3);
    -webkit-animation: shrink 1s infinite;}
@-webkit-keyframes jump{
    0%{top:0;
        -webkit-animation-timing-function: ease-in;}
    65%{top:160px;height:140px;}
    75%{height:120px;}
    100%{top:0px;height:140px;}
}
@-webkit-keyframes shrink{
    0%{width:90px;height:60px;
        -webkit-animation-timing-function: ease-in;}
    65%{width:10px;height:5px;
        margin-left:-5px;
        background:rgba(20,20,20,0.3);
        box-shadow:0 0 25px 20px rgba(20,20,20,0.3);}
    100%{width:90px;height:60px;
        background: rgba(20,20,20,0.1);
        box-shadow: 0 0 25px 20px rgba(20,20,20,0.1);}
}
</style>

 

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

转载于:https://my.oschina.net/u/3529780/blog/920067