HTML for android 移动小球

来源：互联网发布：用java编写的小软件编辑：程序博客网时间：2024/06/08 14:28
<html><head><title>球</title> <style type="text/css"> .test{width:100px;height:100px;position:absolute;top:0px;left:0px;background:red;border-radius:50px;transition: left 5s ease-out 5s,background-color 5s ease 0s;-moz-transition:left 5s ease-out 5s,background-color 5s ease 0s;-webkit-transition:left 5s ease-out 5s,background-color 5s ease 0s;-o-transition:left 5s ease-out 5s,background-color 5s ease 0s;} .second-position{left:50%;background-color:yellow; }.ball{width:20px;height:20px;position:absolute;top:0px;left:0px;background:blue;border-radius:50px;animation:bouncyball 3s ease-in-out;-moz-animation:bouncyball 12s ease-in-out;-webkit-animation:bouncyball 23s ease-in-out;} @keyframes bouncyball{0%{bottom:100%;left:0px;}12.5%{bottom:0px;left:12.5px;}25%{bottom:50%;left:25%;}50.5%{bottom:0px;left:12.5px;}55%{bottom:24%;left:50%;}62.5%{bottom:0px;left:12.5px;}75%{bottom:12.5;left:75%;}80.5%{bottom:0px;left:12.5px;}100%{bottom:2%;left:100%;} }  @-moz-keyframes bouncyball{0%{bottom:100%;left:0px;}12.5%{bottom:0px;left:12.5px;}25%{bottom:50%;left:25%;}50.5%{bottom:0px;left:12.5px;}55%{bottom:24%;left:50%;}62.5%{bottom:0px;left:12.5px;}75%{bottom:12.5;left:75%;}80.5%{bottom:0px;left:12.5px;}100%{bottom:2%;left:100%;} }  @-webkit-keyframes bouncyball{0%{bottom:100%;left:0px;}12.5%{bottom:0px;left:12.5px;}25%{bottom:50%;left:25%;}50.5%{bottom:0px;left:12.5px;}55%{bottom:24%;left:50%;}62.5%{bottom:0px;left:12.5px;}75%{bottom:12.5;left:75%;}80.5%{bottom:0px;left:12.5px;}100%{bottom:2%;left:100%;} } </style></head> <body><div class="test"></div><script>document.getElementsByClassName('test')[0].classList.add('second-position');</script><div class="ball"></div>  </body></html>