Diterangkan menggunakan animasi CSS: bola melantun ke atas dan ke bawah (tempoh 2s, dilaksanakan sekali)
Ditulis secara santai tanpa mengambil kira keserasian Anda boleh menukar kelajuan pergerakan atau sesuatu sendiri
<style> #app{ width: 300px; height:400px; border: 1px solid #d6e9c6; position: relative; } .barTip{ width: 100px; height: 10px; background: red; position: absolute; top: 130px; left: 32%; } #bar{ position: absolute; width: 30px; height:30px; background: #2a6496; border-radius: 15px; left: 45%; animation-name:myfirst; animation-duration:2s; animation-timing-function:linear; /*animation-delay:2s;*/ animation-iteration-count:1; animation-direction:alternate; animation-play-state:running; } @keyframes myfirst { 0% { top:0px;} 10% { top:20px;} 20% { top:40px;} 30% { top:60px;} 40% { top:80px;} 50% { top:100px;} 60% { top:80px;} 70% { top:60px;} 80% { top:40px;} 90% { top:20px;} 100% { top:0px;} } </style> </head> <body> <p id="app"> <p id="bar"> <!--球--> </p> <!--板--> <p class="barTip"> </p> </p
Saya tidak tahu sama ada ini yang anda mahukan, saya cadangkan anda lihat css3 demo jsbin
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ditulis secara santai tanpa mengambil kira keserasian Anda boleh menukar kelajuan pergerakan atau sesuatu sendiri
Saya tidak tahu sama ada ini yang anda mahukan, saya cadangkan anda lihat css3
demo jsbin