HTML5 3D小球弹跳动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5 3D小球弹跳动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>HTML5 3D小球弹跳动画</title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>
  <div class="wrap red">
  <div class="shadow"></div>
  <div class="ball"></div>
</div>
<div class="wrap green">
  <div class="shadow"></div>
  <div class="ball"></div>
</div>
<div class="wrap blue">
  <div class="shadow"></div>
  <div class="ball"></div>
</div>
</body>
</html>

CSS代码(style.css):

html,body{height:100%;}
body{background:#fff;background:-webkit-radial-gradient(#fff,#ccc);background:radial-gradient(#fff,#ccc);}
.wrap{bottom:100px;margin-left:-50px;position:absolute;width:100px;}
.red{left:25%;}
.green{left:50%;}
.blue{left:75%;}
.ball,.shadow{border-radius:100%;left:0;margin:auto;position:absolute;right:0;top:0;}
.ball{-webkit-animation:ball 300ms cubic-bezier(0.165,0.840,0.440,1.000) infinite alternate;animation:ball 300ms cubic-bezier(0.165,0.840,0.440,1.000) infinite alternate;height:50px;width:50px;}
.red .ball{background:-webkit-gradient(linear,left top,left bottom,from(#e55),to(#b00));background:-webkit-linear-gradient(#e55,#b00);background:linear-gradient(#e55,#b00);}
.green .ball{background:-webkit-gradient(linear,left top,left bottom,from(#5d5),to(#0a0));background:-webkit-linear-gradient(#5d5,#0a0);background:linear-gradient(#5d5,#0a0);}
.blue .ball{background:-webkit-gradient(linear,left top,left bottom,from(#59e),to(#04b));background:-webkit-linear-gradient(#59e,#04b);background:linear-gradient(#59e,#04b);}
.shadow{-webkit-animation:shadow 300ms cubic-bezier(0.165,0.840,0.440,1.000) infinite alternate;animation:shadow 300ms cubic-bezier(0.165,0.840,0.440,1.000) infinite alternate;background:#000;bottom:-90px;height:25px;width:75px;}
.red .ball,.red .shadow{-webkit-animation-delay:-200ms;animation-delay:-200ms;}
.green .ball,.green .shadow{-webkit-animation-delay:-100ms;animation-delay:-100ms;}
.blue .ball,.blue .shadow{-webkit-animation-delay:0;animation-delay:0;}
@-webkit-keyframes ball{0%{-webkit-transform:translateY( 0 );transform:translateY( 0 );}
100%{-webkit-transform:translateY( -150px );transform:translateY( -150px );}
}
@keyframes ball{0%{-webkit-transform:translateY( 0 );transform:translateY( 0 );}
100%{-webkit-transform:translateY( -150px );transform:translateY( -150px );}
}
@-webkit-keyframes shadow{0%{opacity:0.2;-webkit-transform:scale( 0.75 );transform:scale( 0.75 );}
100%{opacity:0.05;-webkit-transform:scale( 1 );transform:scale( 1 );}
}
@keyframes shadow{0%{opacity:0.2;-webkit-transform:scale( 0.75 );transform:scale( 0.75 );}
100%{opacity:0.05;-webkit-transform:scale( 1 );transform:scale( 1 );}
}

附件:下载该文件资源,减少时间成本(增值服务)